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

Chapter 4. Image Basics > Making Multiple Links Change a Single Rollover

Making Multiple Links Change 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 4.7 shows Script 4.5 in action. As with most of the scripts in this book, it builds on previous examples, so we'll just explain the new concepts.

Figure 4.7. 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.

Script 4.5. Changing a single image from multiple links is the key to this script.

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">

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.

<a href="heliPage.html" onmouseover=
→ "document.textField.src=
→ heliText.src" onmouseout=
→ document.textField.src=
→ bgText.src">

The third link, for the helicopter, sets document.textField.src equal to heliText.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.

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