- 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
Triggering Rollovers from a Link
In earlier examples, the user triggered the rollover by moving the mouse over an image. But you can also make a rollover occur
when the user hovers over a text link, as in 
and 
. The HTML is an unexciting page with one link and one image, shown in Listing 4.7. We’ll do the rollover by modifying the script used in previous examples, as in Listing 4.8.
)
)
Listing 4.7. This script shows the HTML for a rollover from a text link.
<!DOCTYPE html>
<html>
<head>
<title>Link Rollover</title>
<script src="script04.js"></script>
<link rel="stylesheet" href="script01.css">
</head>
<body>
<h1><a href="next.html" id="arrow">Next page</a></h1>
<img src="images/arrow_off.gif" id="arrowImg" alt="arrow">
</body>
</html>
To trigger a rollover from a link:
function rolloverInit() { for (var i=0; i<document.links.length; i++) {After beginning the rolloverInit() function, we start a loop, much like previous examples in this chapter. But there we were looking for images (document.images.length), and here we’re looking for links (document.links.length). The loop begins by setting the counter variable i to zero. Every time around, if the value of i is less than the number of links in the document, increment i by 1.
- var linkObj = document.links[i];
We create the linkObj variable and set it to the current link.
if (linkObj.id) { var imgObj = document.getElementById(linkObj.id + "Img");If linkObj has an id, then we check to see if there’s another element on the page that has an id that’s the same plus Img. If so, put that element into the new variable imgObj.
if (imgObj) { setupRollover(linkObj,imgObj);If imgObj exists, then call the setupRollover() function, passing it the link object and the image object.
Listing 4.8. Here is the JavaScript for a rollover from a text link.
window.onload = rolloverInit;
function rolloverInit() {for (var i=0; i<document.links.length; i++) {var linkObj = document.links[i];if (linkObj.id) {var imgObj = document.getElementById(linkObj.id + "Img");if (imgObj) {setupRollover(linkObj,imgObj);} } } }function setupRollover(thisLink,thisImage) {thisLink.imgToChange = thisImage;thisLink.onmouseout = function() {this.imgToChange.src = this.outImage.src;}thisLink.onmouseover = function() {this.imgToChange.src = this.overImage.src;}thisLink.outImage = new Image(); thisLink.outImage.src = thisImage.src; thisLink.overImage = new Image(); thisLink.overImage.src = "images/" + thisLink.id + "_on.gif"; }function setupRollover(thisLink,thisImage) { thisLink.imgToChange = thisImage;The setupRollover() function begins with the link and image parameters that were passed to it in step 4. Then we add a new property, imgToChange, to the link object. JavaScript needs some way of knowing what image is to be changed when the link is moused over, and this is where it’s stored.
thisLink.onmouseout = function() { this.imgToChange.src = this.outImage.src; } thisLink.onmouseover = function() { this.imgToChange.src = this.overImage.src; }When the mouseover and mouseout are triggered, they’re slightly different from the previous examples in this chapter: now, this.imgToChange.src is being reset instead of this.src itself.