Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > PHP/MySQL/Scripting

  • Print
  • + Share This
From the author of

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.

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:

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

  2. <A HREF="flyPage.html" onMouseover=
    onMouseout= "document.textField.src=bgText.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.

  • + Share This
  • 🔖 Save To Your Account