Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Ajax and JavaScript

  • Print
  • + Share This
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 Figures 4.6 and 4.7. The HTML is an unexciting page with one link and one image, shown in Script 4.6. We’ll do the rollover by modifying the script used in previous examples, as in Script 4.7.

Figure 4.6

Figure 4.6 The text link is the triggering device for this rollover.

Figure 4.7

Figure 4.7 When the user points at the link, the graphic below changes.

Script 4.6. This script shows the HTML for a rollover from a text link.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
→ Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/
        → xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>Link Rollover</title>
     <script type="text/javascript"
     → src="script04.js"></script>
</head>
<body bgcolor="#FFFFFF">
     <h1><a href="next.html" id="arrow">Next
     → page</a></h1>
     <img src="images/arrow_off.gif" width="147"
     → height="82" id="arrowImg" alt="arrow" />
</body>
</html>

To trigger a rollover from a link:

  1. 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.

  2. var linkObj = document.links[i];

    We create the linkObj variable and set it to the current link.

  3. 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.

  4. if (imgObj) {
      setupRollover(linkObj,imgObj);

    If imgObj exists, then call the setupRollover() function, passing it the link object and the image object.

    Script 4.7. 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";
    }
  5. 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.

  6. 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.

  • + Share This
  • 🔖 Save To Your Account