- 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.
)
To add links to cycling banners:
- window.onload = initBannerLink;
When the window finishes loading, trigger the initBannerLink() function.
Listing 4.16. The HTML needed for an ad banner.
<!DOCTYPE html> <html> <head> <title>Rotating 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> 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.
Listing 4.17. 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); }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.
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.