A JavaScript Banner Ad Rotator

I wrote this script to address some of the shortcomings of the other facilities I have seen for creating rotating banner advertisements "Banner Ads", namely:

The script described on this page addresses both problems. It displays a different image after a specific amount of time, and clicking on each of the images in the sequence will take you to a different URL. An example banner is shown below:

Banner Advertisement

The example above displays a sequence of 4 GIFs. This script works with Netscape 3 and above, and also in Microsoft's Internet Explorer 4 (it does not run on Internet Explorer 3). To prevent unwanted JavaScript errors on browsers that do not support this use of JavaScript, it is configured to run only on browsers that support it.

There are several requirements for this script:

<a href="javascript:changepage()"><img src="021298-0.gif" alt="Banner Advertisement" border="0" hspace="0" name="bannerad" WIDTH="466" HEIGHT="58"></a>

<script language="javascript"><!--
function loadpage() {
browver= parseInt(navigator.appVersion);
browtype = navigator.appName;
browsertype = "old";
if (browtype == "Netscape" && !(browver < 3)) {
browsertype = "new";
}
if (browtype == "Microsoft Internet Explorer" && !(browver < 4)) {
browsertype = "new";
}
if (browsertype == "new") {
thetimer = setTimeout("changeimage()", 3000);
banneradcode = 0;
listofimages = new Array(4);
listofimages[0] = new Image(468,58)
listofimages[0].src = "021298-0.gif"
listofimages[1] = new Image(468,58)
listofimages[1].src = "021298-1.gif"
listofimages[2] = new Image(468,58)
listofimages[2].src = "021298-2.gif"
listofimages[3] = new Image(468,58)
listofimages[3].src = "021298-3.gif"
}
}


function changeimage(){
if (browsertype == "new") {
banneradcode = banneradcode + 1
if (banneradcode == "4") {
banneradcode = 0
}
imagesource = "021298-" + banneradcode + ".gif"
window.document.bannerad.src = imagesource
thetimer = setTimeout("changeimage()", 5000);
}
else if (browsertype == "old") {
}
}

function changepage() {
if (browsertype == "new") {
if (banneradcode == 0) {
newlocation = "http://www.babylon6.demon.co.uk/graphics.html"
}
else if (banneradcode == 1) {
newlocation = "http://www.babylon6.demon.co.uk/get_animgifs.html"
}
else if (banneradcode == 2) {
newlocation = "http://www.bmc.org.uk/"
}
else if (banneradcode == 3) {
newlocation = "http://www.babylon6.demon.co.uk/"
}
location = newlocation
}
else if (browsertype == "old") {
location = "http://www.babylon6.demon.co.uk/graphics.html"
}
}

// --></script>

<body bgcolor="#000080" onload="loadpage()">

How the script works:

When the web page is first loaded into the web browser, it runs the function loadpage. This is the first function in the script shown above. The first part of this function is a fairly standard browser detection routine. This sets a variable of browsertype to be "old" by default. However, in browsers that can support all of the JavaScript functions needed to run the script (Netscape 3 & 4 and Internet Explorer 4), it sets the browsertype to "new". Throughout the rest of the script you will see that certain functions will only work in browsertype is set to "new".

The loadpage function sets a timer (called "thetimer") for 5000 milliseconds (i.e. 5 seconds). When this timer reaches zero, it then runs the changeimage function (the use of which is described further on). Don't forget that the timer can be altered to show a the next image at a longer time interval - important if you don't want to keep distracting the person viewing the web page.

The loadpage function also sets up a new array called listofimages. This array contains the filenames of the different images that will be loaded. In this particular script, the array is initialized using a slightly different procedure to normal; it creates each item in the image as a new image, then points to the image source. This is important, because it ensures that the browser loads all the image files in the banner at the same time as it loads the page from the server. This avoids subsequent delays when the next image in the sequence needs to be displayed, and is particularly important for those people viewing your site over a slow Internet link. If you want to use the script on your own pages, you will have to change the filenames (making sure the path to the images is also correct - in this example they are named 021298-3.gif to 021298-3.gif, respectively).

Finally, the loadpage function creates a variable called banneradcode. This variable is used to cycle through the different images to be shown. The initial value of this variable is set to zero.

The second function in the script is called changeimage. This function increases the value of the banneradcode variable, ensuring that if it is too large for the number of different images, it is reset to zero. If you use this script with a different number of images, you will need to change the maximum value from 4 to the number of images you want to use.

After changing the banneradcode variable, the function changes the image source ("src") of the image that has the name of bannerad to point to the next image in the sequence. This is the part of the script which actually changes the image on the page.

The final function in the script is called changepage, and is called when the Banner Ad is clicked on. This function reads the value of banneradcode, and sets an appropriate value for the variable newlocation. If you want to use this script on your own pages, then these links can be changed to whatever you want. The function then sets the location to the newlocation. "location" is a built-in feature of JavaScript that allows you to specify the URL of the page loaded in the web browser. Note that if the browsertype is set to "old" it will set the page location to another page.

Note that both the changeimage and the changepage functions have been set up so that they will only work if the browsertype has been set to "new". This avoids the problems of error messages appearing when the page is viewed in a browser that does not support the later additions to the JavaScript language that are required for the functions to work.

Future modifications to the script:

As always, JavaScripts can always be improved upon, so here are two possible suggestions for further enhancements:

Author: Brett Burridge
Date: 02/12/98

More articles about JavaScript
More articles by Brett Burridge
Author Biography

body>