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

Adding Links to Cycling Banners

Banners are often used in advertising, and you’ll want to know how to make a banner into a link that will take a visitor somewhere when the visitor clicks the banner. Script 4.14 shows the HTML page, which differs from the last example only in that it adds a link around the img tag. Script 4.15 shows a variation of the previous script. In this script, we’ll add a new array. This new array contains destinations that users will be sent to when they click the banner. In this case, the “Eat at Joe’s” banner takes you to negrino.com, “Drink more Java” goes to sun.com, and “Heartburn” goes to microsoft.com, as shown in Figure 4.13. No editorial comments implied, of course.

Figure 4.13

Figure 4.13 Each of these three images is a link, and clicking each image takes you to one of three different Web sites.

To add links to cycling banners:

  1. window.onload = initBannerLink;

    When the window finishes loading, trigger the initBannerLink() function.

    Script 4.14. The HTML needed for an ad banner.

    <!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>Rotating Banner with Links</title>
         <script type="text/javascript"
         → src="script08.js"></script>
    </head>
    <body bgcolor="#FFFFFF">
         <div align="center">
            <a href="linkPage.html">
            → <img src="images/banner1.gif"
            → width="400" height="75" id="adBanner"
            → border="0" alt="ad banner" /></a>
         </div>
    </body>
    </html>

    Script 4.15. This script shows how you can turn cycling banners into real, clickable ad banners.

    window.onload = initBannerLink;
    
    var thisAd = 0;
    
    function initBannerLink() {
         if (document.getElementById("adBanner").parentNode.tagName == "A") {
            document.getElementById("adBanner").parentNode.onclick = newLocation;
         }
         
         rotate();
    }
    
    function newLocation() {
         var adURL = new Array("negrino.com","sun.com","microsoft.com");
         document.location.href = "http://www." +adURL[thisAd];
         return false;
    }
    
    function rotate() {
         var adImages = new Array("images/banner1.
         → gif","images/banner2.gif","images/
         → banner3.gif");
    
         thisAd++;
         if (thisAd == adImages.length) {
            thisAd = 0;
         }
         document.getElementById("adBanner").src =
         → adImages[thisAd];
    
         setTimeout(rotate, 3 * 1000);
    }
  2. if (document.getElementById
    →("adBanner").parentNode.tagName ==
    → "A") {
       document.getElementById
       → ("adBanner").parentNode.onclick
       → = newLocation;
    }
    
    rotate();

    This code, inside the initBannerLink() function, first checks to see if the adBanner object is surrounded by a link tag. If so, when the link is clicked, the newLocation() function will be called. Finally, the rotate() function is called.

  3. function newLocation() {
      var adURL = new Array("negrino.
      → com","sun.com","microsoft.com");

    In the new function newLocation(), the adURL variable gets assigned the three constituents of a new array. Just the domain names need to go in here, because we’ll complete the URLs next.

  4. document.location.href =
    → "http://www." + adURL[thisAd];
    return false;

    Still inside newLocation(), we set the document.location.href object (in other words, the current document window) to the value of the text string http://www. (notice the period), plus the value of one item from adURL. Since adURL is an array, you need to specify a member of the array. That’s stored in thisAd, and the resulting string can be any of the three links, depending on when the user clicks. Last, it returns false, which tells the browser that it should not also load in the href. Otherwise, the browser would do both. We’ve handled everything within JavaScript, so the href doesn’t need to be loaded.

  • + Share This
  • 🔖 Save To Your Account