- Creating Rollovers
- Creating More Effective Rollovers
- Building Three-State Rollovers
- Triggering Rollovers from a Link
- Making Multiple Links Change a Single Rollover
- Working with Multiple Rollovers
- Creating Cycling Banners
- Adding Links to Cycling Banners
- Building Wraparound Slideshows
- Displaying a Random Image
- Cycling Images with a Random Start
This chapter is from the book
This chapter is from the book
This chapter is from the book
Working with Multiple Rollovers
What if you want the image that triggers the rollover to also be a rollover itself? 
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!). Listing 4.12 is the HTML page (no changes except for the title and the name of the external JavaScript file being called), and Listing 4.13 shows the additions to the JavaScript from the previous example.
)
When you roll over one of the images, a description appears and a drop shadow appears around the image itself.
Listing 4.12 This HTML is identical to Listing 4.9, except for the title and reference to the external script.
<!DOCTYPE html>
<html>
<head>
<title>Multiple Links, Multiple Rollovers</title>
<script src="script06.js"></script>
<link rel="stylesheet" href="script02.css">
</head>
<body>
<div id="captionDiv">
<img src="images/DaVinci.jpg" width="144" height="219" alt="DaVinci">
<img src="images/bg.gif" id="captionField" alt="Text Field">
</div>
<div id="inventionDiv">
<img src="images/leoText.gif" id="heading" alt="Leonardo's Inventions">
<a href="flyPage.html" class="captionField" id="flyer"><img src="images/flyer.gif" width="293" height="165" alt="Flying Machine" id="flyerImg"></a>
<a href="tankPage.html" class="captionField" id="tank"><img src="images/tank.gif" width="325" height="92" alt="Tank" id="tankImg"></a>
<a href="heliPage.html" class="captionField" id="helicopter"><img src="images/helicopter.gif" width="224" height="160" alt="Helicopter" id="helicopterImg"></a>
</div>
</body>
</html>
Listing 4.13 This script handles the multiple rollovers.
window.onload = rolloverInit;
function rolloverInit() {
for (var i=0; i<document.links.length; i++) {
var linkObj = document.links[i];
if (linkObj.className) {
var imgObj = document.getElementById(linkObj.className);
if (imgObj) {
setupRollover(linkObj,imgObj);
}
}
}
}
function setupRollover(theLink,textImage) {
theLink.imgToChange = new Array;
theLink.outImage = new Array;
theLink.overImage = new Array;
theLink.imgToChange[0] = textImage;
theLink.onmouseout = rollOut;
theLink.onmouseover = rollOver;
theLink.outImage[0] = new Image();
theLink.outImage[0].src = textImage.src;
theLink.overImage[0] = new Image();
theLink.overImage[0].src = "images/" + theLink.id + "Text.gif";
var rolloverObj = document.getElementById(theLink.id + "Img");
if (rolloverObj) {
theLink.imgToChange[1] = rolloverObj;
theLink.outImage[1] = new Image();
theLink.outImage[1].src = rolloverObj.src;
theLink.overImage[1] = new Image();
theLink.overImage[1].src = "images/" + theLink.id + "_on.gif";
}
}
function rollOver() {
for (var i=0;i<this.imgToChange.length; i++) {
this.imgToChange[i].src = this.overImage[i].src;
}
}
function rollOut() {
for (var i=0;i<this.imgToChange.length; i++) {
this.imgToChange[i].src = this.outImage[i].src;
}
}
To work with multiple rollovers:
theLink.imgToChange = new Array; theLink.outImage = new Array; theLink.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 theLink, each of which is an array.
theLink.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.
theLink.outImage[0] = new Image(); theLink.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.
theLink.overImage[0] = new Image(); theLink.overImage[0].src = "images/" + theLink.id + "Text.gif";
Similarly, the over (on) version of the image is calculated and stored in the first element of overImage.
var rolloverObj = document.getElementById(theLink.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.
theLink.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.
theLink.outImage[1] = new Image(); theLink.outImage[1].src = rolloverObj.src;
This sets the second array element of outImage to the out (off) version of the image.
theLink.overImage[1] = new Image(); theLink.overImage[1].src = "images/" + theLink.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 6–8 with the third image object.
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 stored—that’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.
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.