- Multiple Links Changing a Single Rollover
- Working with Multiple Rollovers
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Working with Multiple Rollovers
What if you want the image that triggers the rollover to be a rollover itself? Figure 4 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 3 shows how this just requires a simple addition to the previous example.
){kind=link}
Figure 4 When you roll over one of the images, a description appears and a drop shadow appears around the image itself.
To work with multiple rollovers:
flyOff = new Image tankOff = new Image heliOff = new Image flyOn = new Image tankOn = new Image heliOn = new Image flyOff.src = "images/flyer.gif" tankOff.src = "images/tanks.gif" heliOff.src = "images/helicopter.gif" flyOn.src = "images/flyer2.gif" tankOn.src = "images/tanks2.gif" heliOn.src = "images/helicopter2.gif"
These lines were added since the last example because the script has more images to work with. They set up the off and on images for each of the three inventions. In the else part of the if (document.images) conditional, you also need to add empty variables for backwards browsers.
<A HREF="flyPage.html" onMouseover= "document.textField.src=flyText.src; document.flyImg.src=flyOn.src" onMouseout= "document.textField.src=bgText.src; document.flyImg.src=flyOff.src">
What's different about this link tag is that it has two assignment statements for the onMouseover, and two for the onMouseout, separated in each case by semicolons. The semicolon allows you to follow one command with another, so you can use a semicolon to group the assignment statements.
It's important to remember that every image that ever gets rolled over must have a unique name.