| ASP |
| CGI |
| FrontPage |
| HTML |
| Java |
| JavaScript |
Visit the Mortgage Loan Place for Home Loans and also click here to find VA Loans on our site. 
|
home / articles / javascript
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 Banner Ad Manager that comes with Microsoft FrontPage 98 uses Java to create a banner that changes on the page. This has the problem that it takes a few seconds for the Java Applet to load, and each image in the sequence cannot point to a different URL.
- The Ad Rotator Active Server Component of Microsoft's Internet Information Server can insert a random image on a page, with each image pointing to an appropriate URL. But each Ad can only point to a single URL.
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:
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:
- You need several, identically sized images. In this example, I have used six different GIF images, each of which is 466 wide and 58 high. All of the example images are animated GIFs, but the script works just as well with non-animated GIFs (and with some modification, could even be used with JPEGs).
- You need to add some extra code to your HTML document. For the script to work there must be an initial image on the web page. In this case the image has a filename of 021298-0.gif. This image will also be visible when the page is viewed in browsers that do not support the script. After loading the image, its width and height should be specified, and it should also be given a name (in this case bannerad). The image should be hyperlinked so that the changepage JavaScript function is executed when the image is clicked on. Example code for including the initial image is shown below:
<a href="javascript:changepage()"><img src="021298-0.gif" alt="Banner Advertisement" border="0" hspace="0" name="bannerad" WIDTH="466" HEIGHT="58"></a>
- You need to add a few lines of JavaScript as shown below:
<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>
- You need to modify the <BODY> HTML tag of the page so that when the page is loaded, it executes the loadpage function. Do this by adding the onload tag, as shown below:
<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:
- The script currently cycles through a series of images, but it would not be too difficult to modify it to show the images in a random order.
- The major drawback with this script is that it does not work with Internet Explorer 3. This is due to the fact the IE3 doesn't support the image object like the other browsers do. With some future work it could be made to work with IE3 - but I'll let you figure that one out!
Author: Brett Burridge
Date: 02/12/98
More articles about JavaScript
More articles by Brett Burridge
Author Biography
