Rotating Ad Banners with Links
The script below will allow you to change the URL of the banner ad as it rotates.
First we create an array of the source files for the ads.
<![CDATA[
ads = new Array(3);
ads[0] = "slipper_ad.gif";
ads[1] = "webnichebanner.jpg";
ads[2] = "sfcmp_ad.gif";
]]>
Then create an array for the URLs linking the ads.
<![CDATA[newplace = new Array(3);
newplace[0] = "http://www.silcom.com/~bevjack/"
newplace[1] = "http://www.webniche.com"
newplace[2] = "http://www.sfcmp.org"]]>
Now create variables for the timer and counter.
<![CDATA[var timer = null
var counter = 0]]>
The timer here is set to delay the image switch every four seconds. Then the counter is incremented by one. If the counter is greater than or equal to three then it is reset to zero. The images source, that I named 'bannerad', is changed to the next image in the 'ads' array.
<![CDATA[function banner() {
timer=setTimeout("banner()", 4000);
counter++;
if (counter >= 3)
counter = 0;
document.bannerad.src = ads[counter];
}]]>
This next function takes the current number being incremented by the previous function and uses it to assign the corresponding URL for the ad.
<![CDATA[function gothere() {
counter2 = counter;
window.location.href = newplace[counter2];
}]]>
Now use 'onload' to automatically start the rotating function as soon as the page is loaded.
<![CDATA[<BODY BGCOLOR="#FFFFFF" onload="banner()">]]>
The function 'gothere' is used as the href link. Name your image to match the rotating function. Because the the function is activated as soon as the page is loaded and that increments the counter right away, I started with the second image in the array.
<![CDATA[<CENTER><a href="javascript:void gothere()">
<IMG SRC="webnichebanner.jpg" WIDTH="468" HEIGHT="60"
BORDER="0" NAME="bannerad"></a><P></CENTER>
]]>
Here is the code in it's entirety:
| back to menu | |
