Creating an Animated Banner Ad | Sams Teach Yourself HTML and CSS in 24 Hours (7th Edition)

One of the most common uses of scripting is animating images, as you learned earlier in the hour. Although hover buttons and other forms of user interface improvements are certainly helpful, there is a more lucrative approach to animated images that you should consider when it comes to scripting. I'm referring to animated banner ads, which display a succession of advertisements over time. You've no doubt seen these kinds of ads around the Web because ads are now commonplace on virtually all large web sites.

The first step in putting together an animated banner ad is creating the individual ad images. Banner ads come in all shapes and sizes, but I personally like vertical banner ads that occupy space down the side of a web page. Figure 17.5 shows a series of three banner ad images that are oriented vertically.

Figure 17.5. An animated banner ad consists of several images all created the exact same size.

The three images in the figure are displayed one after another to form an animated banner ad. The key to the ad working properly is establishing a timing mechanism so that each ad image is displayed for a few seconds before the next one is shown. This can be easily accomplished with JavaScript code, as shown in Listing 17.3.

Listing 17.3. A Web Page That Displays a Carefully Timed Series of Ad Banner Images

 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">   <head>     <title>Tall Tales Banner Ad</title>     <script type="text/javascript">       <!--       var bannerNum = 1;       function rotateBanner() {         if (++bannerNum > 3)           bannerNum = 1;         document.getElementById("ttbanner").src = "banner" + bannerNum +           ".gif";         window.setTimeout('rotateBanner();', 3000);       }       //-->     </script>   </head>   <body onload="window.setTimeout('rotateBanner();', 3000);">     <h1 style="text-align:center">Game Lovers Anonymous</h1>     <p>       <a href="http://www.talltalesgame.com/">       <img src="/books/4/158/1/html/2/banner1.gif" alt="Tall Tales"  style="border:none;       float:right" />       </a>       Welcome to Game Lovers Anonymous. We love to play       games, and invite you to support us by visiting our       sponsors as you enjoy our site.     </p>   </body> </html>

This code is another example of JavaScript code that you don't necessarily have to understand inside and out in order to use effectively in your own web pages. There are a few things worth pointing out so that you'll understand how to tweak the code to suit your own needs, but beyond that I'm suggesting that you don't worry too much about how it works. The idea is to add some sizzle to your web pages, not to become a programmer overnight.

Figure 17.6 shows the ad banner sample page in action. Okay, maybe the printed page is not the best way to show something in action, but you get the idea that you're seeing one of the ad banners as the page is flipping through all of them.

Figure 17.6. The JavaScript code in Listing 17.3 produces this vertical banner ad that cycles through three different ad images.

By the Way

Hour 7 showed you how to create a similar animated banner ad effect by creating an animated GIF image that cycled between the three individual ad images. Although that approach certainly worked, and in fact provided a smoother animation due to the fade effect, the resulting animated GIF is much larger than the three individual GIF images used in the JavaScript version. Furthermore, the JavaScript version of the animated banner ad is much easier to modify to accommodate additional ads or change out the existing ads.

There are several lines of code in Listing 17.3 worth taking a closer look at in order for you to be able to create your own banner ads. Let's start with the JavaScript function that actually changes (rotates) the ad image:

 function rotateBanner() {   if (++bannerNum > 3)     bannerNum = 1;   document.getElementById("ttbanner").src = "banner" + bannerNum + ".gif";   window.setTimeout('rotateBanner();', 3000); }

The rotateBanner() function is used to change the banner ad image once every 3 seconds. A function is a chunk of JavaScript code grouped together to carry out a specific task such as performing a calculation or, in this case, changing an image on the page.

You're probably wondering how the code can possibly know how long to wait before changing an image. This is accomplished in the next-to-last line of code. See the number 3000? This 3000 is the wait period for the banner ad, which determines how long the ad is displayed before the next image is shown. The wait period is specified in milliseconds3,000 milliseconds equals 3 seconds. To slow down or speed up how fast the images change, just change this number.

The other important piece of information in the rotateBanner() function is the number of banner ads, which in this code is set to 3 (look at the second line). If you want to provide more banner ad images and have the page cycle through all of them, just change this number to however many images you have. Also, I forgot to mention that this code assumes that your banner images are named banner1.gif, banner2.gif, banner3.gif, and so on. If you want to use JPEG images instead of GIFs, just change the fourth line of the code so that the .jpg file extension is used instead of .gif.

The other critical line of code in the ad banner example that you absolutely must not leave out is this one:

 <body onload="window.setTimeout('rotateBanner();', 3000);">

This code is what gets everything started because it tells the rotateBanner() function to get started showing and changing the images. Notice that the onload attribute is used, which if you recall from earlier in the hour is a scripting attribute that results in script code being run whenever a page is first loaded. You may also notice that the number 3000 appears again in this code. This is because you must set an initial wait period for the banner ad to make sure that the first image is displayed for a moment before changing to the second one.