- 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
Building Three-State Rollovers
A three-state rollover is one where the rollover has three versions. Besides the original image and the version that appears when the user places the cursor over the image, there is a third version of the image when the button itself is clicked, as shown in 
.
)
When the button is clicked, you get a third image (hard to see in this grayscale image; check our companion website for the full effect).
Listing 4.5, the HTML file, looks almost exactly the same as Listing 4.3 from the previous task. In fact, the only differences are the document’s title and the name of the external JavaScript file that is being called. That’s it. This is an example of why putting all your JavaScript into an external file is so powerful; you can add functionality to your pages without having to rework your HTML pages.
Listing 4.5 By putting your JavaScript in an external file, the HTML for a three-state rollover is virtually identical to a two-state rollover.
<!DOCTYPE html>
<html>
<head>
<title>Three-state Rollovers</title>
<script src="script03.js"></script>
<link rel="stylesheet" href="script01.css">
</head>
<body>
<a href="next1.html"><img src="images/button1_off.gif" alt="button1" id="button1"></a>
<a href="next2.html"><img src="images/button2_off.gif" alt="button2" id="button2"></a>
</body>
</html>
In Listing 4.6, the external JavaScript file, there are only a few changes from Listing 4.4. Rather than go through the whole script again, we’ll just focus on the changes. Remember, the parts of the script that we’re covering are shown in red in the code.
Listing 4.6 This script powers the three-state rollover.
window.onload = rolloverInit;
function rolloverInit() {
for (var i=0; i<document.images.length; i++) {
if (document.images[i].parentNode.tagName == "A") {
setupRollover(document.images[i]);
}
}
}
function setupRollover(theImage) {
theImage.outImage = new Image();
theImage.outImage.src = theImage.src;
theImage.onmouseout = function() {
this.src = this.outImage.src;
}
theImage.clickImage = new Image();
theImage.clickImage.src = "images/" + theImage.id + "_click.gif";
theImage.onclick = function() {
this.src = this.clickImage.src;
}
theImage.overImage = new Image();
theImage.overImage.src = "images/" + theImage.id + "_on.gif";
theImage.onmouseover = function() {
this.src = this.overImage.src;
}
}
To build a three-state rollover:
-
theImage.clickImage = new Image(); theImage.clickImage.src = "images/" + theImage.id + "_click.gif";
In the setupRollover() function, we now need to add a third image property for the click state. In the first line, we create a new image object that will contain the clickImage version of the image. The second line sets the source for clickImage. It builds the name of the source file on the fly, concatenating "images/" with the id of the image, and adding "_click.gif".
theImage.onclick = function() { this.src = this.clickImage.src; }This tells the browser what to do when the user clicks the mouse on the image: in this case, we want to set the image source to its clickImage version.