How to Create Multiple Rollovers with JavaScript
- 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
It's unlikely that you're going to want to put just one rollover on a page. In order to use more than one, you need to add just a little extra code, as in Script 1. The first rollover on the page is used in Figure 1, and the second one can be seen in Figure 2.
){kind=link}
){kind=link}
Figure 1 You can also put multiple rollovers on the same page.
Figure 2 Hovering over the second rollover.
To put multiple rollovers on a page:
button1Red = new Image button1Blue = new Image button2Red = new Image button2Blue = new Image
In this example, we need to create four new image objects. In general, you'll need to create two new image objects per rollover. So in this step, you're setting up variables for two rollovers.
button1Red.src = "images/redButton1.gif" button1Blue.src = "images/blueButton1.gif" button2Red.src = "images/redButton2.gif" button2Blue.src = "images/blueButton2.gif"
button1Red = "" button1Blue = "" button2Red = "" button2Blue = ""
document.button1 = "" document.button2 = ""
Here, we set the src attribute of each new image object to the graphic file with which it is associated.
To prevent errors in older, dumber browsers, we again set the dummy variables (four, this time) to the empty string.
As there are two rollovers this time instead of one, we need to have two dummy document variables, one for each rollove
Tip
Note that each image object and each IMG tag has a unique name. If you copy and paste rollover code from one section of your page to another, make sure that you set the new version to have a unique name. Otherwise, JavaScript gets confused when doing the rollover and doesn't know what image to put where.
Multiple Links Changing a Single Rollover
Up to now, you've seen how mousing over a single image (or actually, the link associated with that image) can trigger a rollover effect. But you can also have several different images that trigger a rollover. This can be very useful when you have several images that you want to annotate. Rolling over each of the images would make the description of that image appear. In this example, we've done just this with images of three of Leonardo daVinci's inventions. As you roll over each image, the description of that image appears in a text box. The description itself is another image. Actually, it's three images, one for each of the three inventions. Figure 3 shows Script 2 in action. As with most of the scripts in this book, it builds on previous examples, so we'll just explain the new concepts.
){kind=link}
Figure 3 This page has three images, a flying machine, a tank, and a helicopter. When you roll over an image, its description appears under Leonardo's face.
To make multiple links change a single rollover:
<A HREF="flyPage.html" onMouseover= "document.textField.src=flyText.src" onMouseout= "document.textField.src=bgText.src"> <IMG SRC="images/flyer.gif" WIDTH="293" HEIGHT="165" BORDER="0" VSPACE="20" ALT="Flying Machine"></A>
This line handles the top invention, the flying machine. The onMouseover event handler puts the contents of flyText.src into document.textField.src (textField is the name of the area that has the description of the invention), and when the mouse is not over the image, replaces the description with a blank background image.
<A HREF="tankPage.html" onMouseover= "document.textField.src=tankText.src" onMouseout= "document.textField.src=bgText.src">
<A HREF="heliPage.html" onMouseover= "document.textField.src=heliText.src" onMouseout= "document.textField.src=bgText.src">
- <IMG SRC="images/bg.gif" WIDTH="208" HEIGHT="27" NAME="textField" VSPACE="20" ALT="Text Field">
This is the IMG tag for the description image, with the name textField, and it shows the key to this script. All three of the anchor tags reference the same document object (document.textField.src), not different objects. That's because they're all changing the same object.
The link for the second image on the page (the tank) works in much the same way as the link for the first image. All that's different is that it sets document.textField.src to tankText.src.
The third link, for the helicopter, sets document.textField.src equal to heliText.src.