A JavaScript Banner Rotator
Ok, ok - I just know how annoying banners can be, particularly when you aren't interested in what they have to offer (but some banners I have found to be very useful!) But there are times when you may want to rotate your image links to save space or just to make your page a little bit interesting. So how do we go about doing this then? Its one of the most handiest little languages to learn when starting out designing - JavaScript - what else did you expect?
What this script is not...
Before you start to think that this script is the answer to your banner exchange solutions - think again! This script is unsuitable for a banner exchange for several reasons.
- Firstly, if there are too many banners to choose from then it can significantly add to the download time of your page, as well as reducing the possibility of your visitor seeing a particular banner.
- Secondly, as the code will change as new links are added, you will have to contact all members of an exchange using this system to update their banner code.
- Finally, there is no way of tracking or rewarding members that actively show other members links - basically it is a game of chance as to which banners get shown the most often.
While the script demonstrated here is not adequate to run a banner exchange, it should serve a small site owner quite well for advertising other sites that they own as well as their favourite links, etc.
This is the code
First things first - you need to have a few banners to link together, so I suggest you go and make those banners as soon as possible. You will find life much easier if you make them all the same size however, since there are different methods of going about this depending on which browser the page is intended for. The example given below should work well for most browsers (providing that you have JavaScript enabled) - perhaps with the exception of the earlier versions... but if you are still using them now I would strongly recommend that you need to update!
There are three main sections that make this script work, the script snippet holding the functions, the snippet that initialises the banner and the HTML file used to display the banner in the later versions of Internet Explorer.
First of all, the function code, just below, should be placed in the header file of all the pages that you wish to use the script on. If you want a different size image, then be sure to set your image and width attributes to something that is appropriate for your use. I did try to link this code into my pages using the link tag, but it prevented it from working so I would not recommend that you put this code in an external script file. If you want to change the speed of the rotation, then you should change the values in the setTimeout lines, I have it set to 60 seconds.
<script TYPE="text/javascript" LANGUAGE="JavaScript"><!--
function Href(dest,image,text) {
this.dest = dest; this.image = image; this.text = text; }
function setHref(dest,image,text) {
myHref"hrefItems++" = new Href(dest,image,text); }
function replace() {
var now = new Date();
random = now.getSeconds()%hrefItems;
if (random == lastrandom) {
if (random == hrefItems-1) random--; else random++; }
document "'banner'".src = myHref"random".image;
document.links"0".href = myHref"random".dest;
setTimeout('replace()',60000);
lastrandom = random; }
function Test() {
if (navigator.appName == "Netscape") {
var now = new Date();
random = now.getSeconds()%hrefItems; lastrandom = random;
document.write('<A HREF="' + myHref"random".dest + '">');
document.write('<IMG NAME="banner" WIDTH=468 HEIGHT=60 ');
document.write('BORDER=0 ALT="Caption for image here" ');
document.write('SRC="' + myHref"random".image + '">');}
if (navigator.appName == "Netscape"
&& parseInt(navigator.appVersion) >= 3) {
setTimeout('replace()',60000);}}
//-->
Then, you add this little snippet of code for each banner you want to create on your page. Make sure to change the details of each banner to suit the sites that you wish to link to (you can add more so long as you stick to the example format).
<script TYPE="text/javascript" LANGUAGE="JavaScript"><!--
var random = 0;
var lastrandom = -1;
var hrefItems = 0;
var myHref = new Array();
setHref('http://www.site1.com','banner1.gif','Site 1');
setHref('http://www.site2.com','banner2.gif','Site 2');
setHref('http://www.site3.com','banner3.gif','Site 3');
Test();
//--></script>
<noscript>Please enable JavaScript if you wish to see this image and link.</noscript>
<iframe FRAMEBORDER="0" WIDTH="468" HEIGHT="60" MARGINHEIGHT="0"
MARGINWIDTH="0" SCROLLING="no" SRC="banner.html"></iframe>
After putting the code in your page - you need to create a new page for the floating frame that the later versions of Internet Explorer will use. The page used in the code above is called banner.html - but of course you can change this reference to suit your needs. Please feel free to view and download the source code for the banner.html page, to download it, right click on the link and then select the "save target as" option - or open up the page (link opens in a new window) and then choose save in the file menu of your browser.
If you have changed the image size or the timer value in the script, make sure to change the corresponding values in the HTML file also, otherwise you will end up with a banner that changes shape and rotation speed depending which browser was used.