There are several requirements for this script:
- You need several, identically sized images. The images can be in any format supported by browsers (i.e. GIF, PNG or JPEG). The example described in this article uses four different images, each of which is 468 pixels wide and 60 pixels high.
<img src=”images/AmazonAd1_anim.gif” alt=”Banner Advertisement” border=”0” hspace=”0”
You also need to modify the <BODY> HTML tag of the page so that when the page is loaded, it executes the InitialiseBannerAdRotator function. Do this by adding the onload tag, as shown below:
The script has a number of parameters in the section headed “User defined variables”, which you will need to change in order to customise the script.
The parameters are described below:
ImageFileNames – this should be a list of images to use with the script.
ImageURLs – this should be a list of URLs to associate with the list of images. Needless to say, the number of items in this list should be the same as the number of images.
DefaultURL – the default URL the banner ad rotator should link to. This hyperlink is the one browsers are redirected to if the banner ad image is clicked on with a browser that is not fully supported by the script.
DisplayInterval – the time interval (in seconds) before the next image is displayed.
TargetFrame – the name of the frame in which to open the URL in. Leave as “” if the banner ad should open the URL in the same frame as the page containing the script.
When the web page is first loaded into the web browser, it runs the function InitialiseBannerAdRotator. The first part of this function determines the name and version of the browser the script is being run on, setting the variable IsValidBrowser to true if the browser is supported by the script. Browsers supported by the script are Netscape versions of 3 and above, Microsoft Internet Explorer 4 and above and Google Chrome.
The InitialiseBannerAdRotator function then sets a timer called “TimerObject” for the time interval specified in the user defined variables. When this timer reaches zero, it then runs the ChangeImage function (the use of which is described further on).
The function also assigns zero to the BannerAdCode variable. This variable is used to cycle through the different images to be shown. Finally, the function pre-loads the images required by the script.
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. 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.
Using the Script With WordPress
The script does work with WordPress, but you might need a little bit of effort to shoe-horn it into WordPress. As you can see, I’ve actually got it working on this page you’re reading now, and this is a WordPress site!
Alternatively you could add it to the template files by editing them in WordPress (be careful when you do this!).
The main script should really go into the <HEAD> section of the template. If you can’t edit the <BODY> tag then simply add this line:
To the last line of the main script.
Buy the full version:
Banner Ad Rotator sample files (40 Kb ZIP file).