What if you want the image that triggers the rollover to also be a rollover itself? Figure 4.9 builds on the last example and shows how we've added this feature. When you roll over one of the invention images, it makes the description image appear, as before, but this time also swaps out the invention image for another image with a drop shadow. This gives the user visual feedback about what they're pointing at (as if the mouse pointer isn't enough!). Script 4.10 is the HTML page (no changes except for the title and the name of the external JavaScript file being called), and Script 4.11 shows the additions to the JavaScript from the previous example.
1. | thisLink.imgToChange = new Array;
thisLink.outImage = new Array;
thisLink.overImage = new Array;
These lines were added because the script has more images to work with (two for each rollover). In each line, we're creating a new property of thisLink, each of which is a new kind of object, called an array. An array is an object that contains a set of related information. One way to access the contents of an array is numerically inside square brackets. For example, thisLink.imgToChange[0] is the first member of the array. Most numbering of objects in JavaScript begins with 0, rather than 1. See the "JavaScript Strings" sidebar in Chapter 3. |
2. | thisLink.imgToChange[0] = textImage;
In the previous task, imgToChange was an image, but in this task, it's an array that will contain images. Here, textImage is stored in the first element of imgToChange. |
3. | thisLink.outImage[0] = new Image();
thisLink.outImage[0].src = textImage.src;
As previously, we need to store the out (off) version of the image, but this time it's stored in the first element of the outImage array. |
4. | thisLink.overImage[0] = new Image();
thisLink.overImage[0].src = "images/" + thisLink.id + "Text.gif";
Similarly, the over (on) version of the image is calculated and stored in the first element of overImage. |
| |
5. | var rolloverObj = document.getElementById(thisLink.id + "Img");
if (rolloverObj) {
Now we need to figure out if this rollover will trigger multiple images, not just an individual image. If that's the case, there will be an element on the HTML page whose id is the same as this one, but with Img appended. That is, if we're working on flyer, we'll be checking to see if there's a flyerImg element on the page. If there is, it's saved in rolloverObj, and we should do the next three steps. |
6. | thisLink.imgToChange[1] = rolloverObj;
In the same way that we set imgToChange[0] above, we now set imgToChange[1] (the second element in the array) to the new rolloverObj. When the onmouseout and onmouseover event handlers are triggered, both images swap to their alternate versions, as we'll see later. |
7. | thisLink.outImage[1] = new Image();
thisLink.outImage[1].src = rolloverObj.src;
This sets the second array element of outImage to the out (off) version of the image. |
8. | thisLink.overImage[1] = new Image();
thisLink.overImage[1].src = "images/" + thisLink.id + "_on.gif";
And here, the over (on) version of the image is calculated and stored in the second element of overImage. If, for some reason, we wanted a third image to also change during this same rollover, we'd repeat steps 68 with the third image object. |
| |
9. | for (var i=0; i<this.imgToChange. length; i++) {
this.imgToChange[i].src = this.overImage[i].src;
}Here inside the rollOver() function is where the images get swapped. Because one or more images can be changed, we need to start by asking how many images we have storedthat's the value of this.imgToChange.length. Here, the value is 2, because we want two images to change. We then loop through two times, setting the source of imgToChange[0] and then imgToChange[1] to their respective over values. |
10. | function rollOut() {
for (var i=0; i<this. imgToChange.length; i++) {
this.imgToChange[i].src = this.outImage[i].src;
}
This code in the rollOut() function is virtually the same as that in the previous step; the only difference is that we're now resetting those images to their out source values. |
No comments:
Post a Comment