| The JavaScript Banner Ad Rotator 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 can be viewed below:
Adding the Script to Pages
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.
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 bb-amazon-ad1.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 the name attribute of "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="images/AmazonAd1_anim.gif" alt="Banner Advertisement" border="0" hspace="0"
name="bannerad" WIDTH="466"
HEIGHT="58">
</a>
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:
<body onload="InitialiseBannerAdRotator()">
Finally you need to add the Banner Ad Rotator's JavaScript code to
your page.
A link at the bottom of this article will allow
you to download a ZIP file containing the script and example images.
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:
ImageFolder - the name of the folder containing the images. Leave
as "" if the images are in the same folder as the document containing the banner
ad rotator JavaScript.
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, and Microsoft Internet Explorer 4 and above.
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.
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, then sets the
document (or frame) location to the new location. "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 banner is being viewed in a browser not supported by the script,
it will set the page location to that specified in the DefaultURL variable.
The script doesn't open links in a new browser window. If you want the commercial
version of the script that does, then deposit $3 in our PayPal account and you can download an
enhanced version of the JavaScript Banner Ad Rotator code. The commercial version
supports opening adverts into the "_blank" frame (i.e. a new window), as well as
the "_self", "_top" and "_parent" frames.
[Sales Policy].
If you would like the JavaScript Banner Ad Rotator Lite script together
with some sample images, then click on the link below:
|