- Creating Rollovers
- Creating More Effective Rollovers
- Building Three-State Rollovers
- Triggering Rollovers from a Link
- Making Multiple Links Change a Single Rollover
- Working with Multiple Rollovers
- Creating Cycling Banners
- Adding Links to Cycling Banners
- Building Wraparound Slideshows
- Displaying a Random Image
- Cycling Images with a Random Start
This chapter is from the book
This chapter is from the book
This chapter is from the book
Making Multiple Links Change a Single Rollover
Up to now, you’ve seen how mousing over a single area can trigger a rollover effect. But you can also have several different areas that trigger a rollover. This can be very useful, for example, when you have several images that you want to annotate; that is, where rolling over each of the images makes the description of that image appear. In this example, we’ve done just this with images of three of Leonardo da Vinci’s inventions. As you roll over each image, the description of that image appears elsewhere. The description itself is another image. Actually, it’s three images, one for each of the three inventions. 
shows Listing 4.9 (HTML), Listing 4.10 (CSS), and Listing 4.11 (JavaScript) in action. As with most of the scripts in this book, it builds on previous examples, so we’ll just explain the new concepts. There are just a few lines that are different between Listing 4.8 and Listing 4.11.
)
This page has three interactive images: a flying machine, a tank, and a helicopter. When you roll over an image, its description appears under Leonardo’s face.
Listing 4.9 Note that the links and images on this page all have unique ids.
<!DOCTYPE html>
<html>
<head>
<title>Multiple Links, Single Rollover</title>
<script src="script05.js"></script>
<link rel="stylesheet" href="script02.css">
</head>
<body>
<div id="captionDiv">
<img src="images/DaVinci.jpg" width="144" height="219" alt="DaVinci">
<img src="images/bg.gif" id="captionField" alt="Text Field">
</div>
<div id="inventionDiv">
<img src="images/leoText.gif" id="heading" alt="Leonardo's Inventions">
<a href="flyPage.html" class="captionField" id="flyer"><img src="images/flyer.gif" width="293" height="165" alt="Flying Machine" id="flyerImg"></a>
<a href="tankPage.html" class="captionField" id="tank"><img src="images/tank.gif" width="325" height="92" alt="Tank" id="tankImg"></a>
<a href="heliPage.html" class="captionField" id="helicopter"><img src="images/helicopter.gif" width="224" height="160" alt="Helicopter" id="helicopterImg"></a>
</div>
</body>
</html>
Listing 4.10 In this CSS file, we define the classes we reference in the HTML.
body {
background-color: #EC9;
}
img {
border-width: 0;
}
#captionDiv {
float: right;
width: 210px;
margin: auto 50px;
}
#captionField {
margin: 20px auto;
width: 208px;
height: 27px;
}
#inventionDiv {
width: 375px;
margin-left: 20px;
}
#heading {
margin-bottom: 20px;
width: 375px;
height: 26px;
}
Listing 4.11 This script shows you how to use multiple links to trigger a single rollover.
window.onload = rolloverInit;
function rolloverInit() {
for (var i=0; i<document.links.length; i++) {
var linkObj = document.links[i];
if (linkObj.className) {
var imgObj = document.getElementById(linkObj.className);
if (imgObj) {
setupRollover(linkObj,imgObj);
}
}
}
}
function setupRollover(theLink,textImage) {
theLink.imgToChange = textImage;
theLink.onmouseout = function() {
this.imgToChange.src = this.outImage.src;
}
theLink.onmouseover = function() {
this.imgToChange.src = this.overImage.src;
}
theLink.outImage = new Image();
theLink.outImage.src = textImage.src;
theLink.overImage = new Image();
theLink.overImage.src = "images/" + theLink.id + "Text.gif";
}
To make multiple links change a single rollover:
if (linkObj.className) { var imgObj = document.getElementById(linkObj.className);We can’t use the id of the rolled-over images to calculate the id of the changed image—that’s because an id has to be unique, and all of the rolled-over images have to come up with the same value for the changed image destination. Instead, we’re using the class attribute (because you can have multiple page elements sharing the same class). In this line, we’re looking for the className of the link object.
function setupRollover(theLink,textImage) { theLink.imgToChange = textImage;The setupRollover() function is passed the current link object (theLink) and the image object, which we’re calling textImage. Note that when we passed these objects (which can also be referred to as variables) in, we called them linkObj and imgObj, respectively.
The rest of the script works the same way as the previous examples in this chapter.