- 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
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. Listing 4.16 shows the HTML page, which differs from the last example only in that it adds a link around the img tag. Listing 4.17 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 
. No editorial comments implied, of course.
)
Each of these three images is a link, and clicking each image takes you to one of three different websites.
Listing 4.16 The HTML needed for an ad banner.
<!DOCTYPE html>
<html>
<head>
<title>Cycling Banner with Links</title>
<script src="script08.js"></script>
<link rel="stylesheet" href="script01.css">
</head>
<body>
<div class="centered">
<a href="linkPage.html"><img src="images/banner1.gif" id="adBanner" alt="ad banner"></a>
</div>
</body>
</html>
Listing 4.17 This script shows how you can turn cycling banners into real, clickable ad banners.
window.onload = initBannerLink;var theAd = 0; var adURL = new Array("negrino.com","sun.com","microsoft.com"); var adImages = new Array("images/banner1.gif","images/banner2.gif","images/banner3.gif"); function initBannerLink() {if (document.getElementById("adBanner").parentNode.tagName == "A") {document.getElementById("adBanner").parentNode.onclick = newLocation;}rotate();} function newLocation() {document.location.href = "http://www." + adURL[theAd];return false;} function rotate() { theAd++; if (theAd == adImages.length) { theAd = 0; } document.getElementById("adBanner").src = adImages[theAd]; setTimeout(rotate, 3 * 1000); }
To add links to cycling banners:
window.onload = initBannerLink;
When the window finishes loading, trigger the initBannerLink() function.
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.
document.location.href = "http://www." + adURL[theAd]; return false;
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 theAd, 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.