Previous Page
Next Page

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.

Script 4.14. The HTML needed for an ad banner.

[View full width]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>Rotating Banner with Links</title>
     <script src="script08.js"
language="javascript" type="text/javascript"> </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 adImages = new Array("images/banner1.gif", "images/banner2.gif","images/banner3.gif");
var adURL = new Array("negrino.com","sun.com", "microsoft.com");
var thisAd = 0;

function rotate() {
     thisAd++;
     if (thisAd == adImages.length) {
        thisAd = 0;
     }
     document.getElementById("adBanner").src = adImages[thisAd];

     setTimeout("rotate()", 3 * 1000);
}

function newLocation() {
     document.location.href = "http://www." + adURL[thisAd];
     return false;
}

function initBannerLink() {
     if (document.getElementById("adBanner"). parentNode.tagName == "A") {
        document.getElementById("adBanner"). parentNode.onclick = newLocation;
     }

     rotate();
}

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

[View full size image]


To add links to cycling banners:

1. 
window.onload = initBannerLink;



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

Tip

  • The adURL array needs to have the same number of array items as the adImages array for this script to work correctly.

2. 
var adURL = new Array("negrino.com", "sun.com","microsoft.com");



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.

3. 
function newLocation() {
  document.location.href = "http://www." + adURL[thisAd];
  return false;



The new function newLocation sets 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 adURL. Since adURL is an array, you need to specify which 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.

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


Previous Page
Next Page