This page does the same thing as the previous one, but it's implemented in a different way. Instead of creating a free-standing function pointer, it adds a pointer directly to the <img> object. This effectively gives the object a custom method, which can be called in the standard object.method() way. The pointer is still aimed at one of two different functions, for IE and non-IE browsers. Here's the code:
function createMethodPointers() {
if (RunningIE4) {
document.images["image1"].changePic =
dissolvePix
} else {
document.images["image1"].changePic =
switchPic}
}
The code is in a function (createMethodPointers() ) rather than inline, for a reason - if it was executed from the <head> section during page load, the <img> object document.images["image1"] wouldn't have been created yet, and the code would generate an error. Instead, this function is called from the <body> tag, like this:
<BODY onload="createMethodPointers()">
Alternatively, it could be in an inline <script> at the end of the <body> section.
The image's picture-changing method is called like this:
<input type="button" value="Picture 1" onclick='document.images["image1"].changePic("pic1.jpg")'>
The method call takes just one parameter (the new image file name), and doesn't need a parameter to tell it which image object to change. Why? Check this code:
function switchPic(newSrc) {
this.src = newSrc}
Instead of an object reference, the function simply uses 'this', which means 'the object which this function is currently acting as a method for'. That's one more possibility of error eliminated.