Previous Page
Next Page

Creating Cycling Banners

When you surf the Web, it's common to see advertising banners that periodically switch between images. Some of these are animated GIF files, which are GIF files that contain a number of frames that play in succession; others are Flash animations. If you want to have a page that cycles through a number of GIFs (either animated or not), you can use JavaScript to do the job, as in Script 4.13. This example uses three GIFs and cycles repeatedly through them, as shown in Figures 4.10, 4.11, and 4.12. The simple HTML page is shown in Script 4.12.

Script 4.12. The HTML loads the first image in the cycling banner; the JavaScript handles the rest.

[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</title>
     <script src="script07.js" language= "javascript" type="text/javascript"> </script>
</head>
<body bgcolor="#FFFFFF">
     <div align="center">
        <img src="images/reading1.gif"  width="400" height="75" id="adBanner"  alt="Ad
 Banner" />
     </div>
</body>
</html>

Script 4.13. You can use JavaScript to cycle between images in a banner.

window.onload = rotate;

var adImages = new Array("images/reading1.gif", "images/reading2.gif","images/reading3.gif");
var thisAd = 0;

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

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

Figure 4.10. The first image, which starts the cycling banner...

[View full size image]


Figure 4.11. ...the second image...

[View full size image]


Figure 4.12. ...the final image. Once the page loads and the banner begins cycling, the animation continues with no user intervention required.

[View full size image]


To create cycling banners:

1. 
var adImages = new Array("images/reading1.gif","images/reading2. gif","images/reading3.gif");
var thisAd = 0;



This code lays the foundation for the script by creating two variables. The first line creates a new variable called adImages and sets it to an array. In this case, the array contains the names of the three GIF files that make up the cycling banner. The other variable, thisAd, is given its beginning value in this code.

2. 
function rotate() {



This line sets up a new function called rotate().

3. 
thisAd++;



Take the value of thisAd, and add one to it.

4. 
if (thisAd == adImages.length) {
  thisAd = 0;



This code sets up a counter that says if the value of thisAd is equal to the number of items in the adImages array, then set the value of thisAd back to zero.

5.
document.getElementById("adBanner"). src = adImages[thisAd];

The image on the Web that is being cycled has the id adBanner; you define the name as part of the img tag, as shown in Script 4.12. This line of code says that the source of the image adBanner is in the array adImages, and the value of the variable thisAd defines which of the three GIFs the browser should use at this moment.

6. 
setTimeout("rotate()", 3 * 1000);



This line tells the script how often to change GIFs in the banner. The built-in JavaScript command setTimeout lets you specify that an action should occur on a particular schedule, always measured in milliseconds. In this case, the function rotate() is called every 3,000 milliseconds, or every 3 seconds, so the GIFs will cycle in the banner every three seconds.

Tips

  • You might be wondering why you would want to use JavaScript for a cycling banner, rather than just create an animated GIF. One good reason is that it lets you use JPEGs or PNGs in the banner, which gives you higher quality images. With these higher-quality images, you can use photographs in your banners.

  • Unlike in some of the previous examples in this chapter, the images in this task are not pre-cached. Each downloads from the server the first time that it's displayed. This is because you might have any number of images in your ad array, and it's not polite to force users to download, for example, 100 images if they're only going to see 2 or 3 of them.



Previous Page
Next Page