• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Image Basics > Working with Multiple Rollovers

Working with Multiple Rollovers

What if you want the image that triggers the rollover to be a rollover itself? Figure 4.8 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.6 shows how this requires a simple addition to the previous example.

Figure 4.8. When you roll over one of the images, a description appears and a drop shadow appears around the image itself.

Script 4.6. This script shows you how to trigger multiple rollovers.

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 older 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.

✓ Tip

  • It's important to remember that every image that ever gets rolled over must have a unique name.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint