Cycling Ad Banner

Javascript: Cycling Ad Banner

Here's a simple bit of javascript that allows you to create a rotating image, like the ad banner to the right. Why not just make an animated gif? Well this way I can use jpegs & pngs (the three ad banners are all jpegs). What's more, I can easily change the ads (and add more to the sequence) by altering my code; to change an animated gif I have to go back and remake it from scratch. As an added bonus, each of these ads is a link to a different web page (try them), which is not so easy to achieve with an animated gif. Finally, this code makes use of an array, a useful tool whether you are using javascript or actionscript.

Procedure

Create a new root folder for this project called adBanner.

You will need three ad banner images. Here are three that you can use (right-click and download the source).

Unzip the file. Inside is an "images" folder that contains three sample ad banners. Place the images folder into adBanner.

Launch Dreamweaver and create a new document.

Save it as adBanner.html into the root folder.

Add the following code to the body of the document:

</a>

This of course throws the first banner image onto the page. You can add styles and/or position it where you like. Note that the link right now goes nowhere ("#"), this is because we will add the individual ad link urls with javascript in a moment.

Now for the javascript; first set up the <script> tags in the head of the document:

</script>

Now we'll add the code in sections. All of the following code should go between the <script></script> tags created in the previous step:

window.onload = initBannerLink;

var adImages = new Array("images/banner1.jpg","images/banner2.jpg", "images/banner3.jpg");

var adURL = new Array("danfergusdesign.com","boatnerd.com", "arloandjanis.com");

var thisAd = 0;

This part of the script triggers a function called "initBannerLink" ( we will create that function below) and sets up three variables. The first variable, "adImages" is set to an array that contains the location/name of the banner images. An array is simply a list of data. The second variable, "adURL," is given the contents of a second array; in this case the array contains the three links that the ads point to. Finally a variable called "thisAd" is created and set initially to zero.

Now more script:

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

This section creates a function called "rotate." This is the function that will cause the images to cycle. First, a value of 1 is added to the variable "thisAd" (in step 8 we set it to zero, so now it equals 1). Then we check to see if "thisAd" has reached the end of the "adImages" array. Currently there are 3 images in the array, so if "thisAd" equals 3, it will be reset to zero by the next line (so it can never exceed the number of available images).

The next bit introduces a little bit of DOM (document object model). It searches the html document for an object with the id name "adBanner." This is the id name we gave the banner image in the mark-up (step 6 above). Next it replaces the ad with the adImage from the array that corresponds to the value of "thisAd." In other words, if "thisAd" currently equals 1, the first image in the array appears. If "thisAd" equals 2, then the second image in the array appears, etc.

Finally, the "setTimeout" line causes the function "rotate" to be executed every 3 seconds.

Now we need to set up the links to the external sites:

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

This script once again uses the DOM to find the link (href) in the html code. It then checks the "thisAd" variable and assigns the corresponding url from the second array to the link (so if "thisAd" equals 1, the first link url is used, etc.). The return false is important, for it prevents the href in the html code from being followed (we want out javascript links to be followed instead).

Finally we write the "initBannerLink" function:

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

This function gets everything working. First it checks to make sure that "adBanner" is surrounded by an anchor tag ("A"). If so, it initializes the "newLocation" and "rotate" functions, starting the rotation process.

There's still one problem. This will work fine as long as the user has javascript enabled on her browser; but what if she doesn't? She'll see just the first ad banner and the link won't work. One solution is to replace the "#" with a link to a page that contains regular html links to your various ads, perhaps with an explanation as to why the user ended up on that particular page.

Finishing Touches.

Try it out, does it work?

Create your own images/ad banners (don't forget to change the urls)

Try adding a fourth or fifth ad.

FTP the ad banner folder to your server space.

Make a link to the html file from your home page.

Point Breakdown

4 pts	Portfolio quality design.
3 pts	Good looking; above average work.
2 pts	It works, but it's nothing fancy.
1 pts	Something's not working right.
0 pts	Poor showing; mostly incomplete or full of errors.

VCB424 Advanced Interactive Design IV

Javascript: Cycling Ad Banner

Procedure

Finishing Touches.

Point Breakdown