Banner Rotation

This script is not maintained any more.

This script is useful when you are required to show banners on a page and to change them every few seconds. You can change the banners by constantly re-loading the page, but this JavaScript method is far more user friendly.

As usual the script runs in this page. The image below will change every 2 seconds and will link to the page indicated.

The script

This is the script.

var banners = new Array(
	'pix/mo_home.gif',
	'pix/mo_home_omo.gif',
	'pix/mo_place.gif',
	'pix/mo_place_omo.gif');
var linx = new Array(
	'intro.html',
	'intro.html',
	'placejs.html',
	'placejs.html');
var old = 0;
var current = 0;

function init()
{
	if (!document.images) return
	while (current == old)
	{
		current = Math.floor(Math.random()*banners.length);
	}
	old = current;
	document.images['banner'].src = banners[current];
	setTimeout('init()',2000);
}

function sendPage()
{
	location.href = linx[current];
}

The script init() is started onLoad. Below the BODY tag is the banner itself, which links to sendPage().

<body onload="init()">
<a href="javascript:sendpage()"><img
	src="pix/mo_home.gif" name="banner"
	width=80 height=50 border=0></a>

Explanation

First of all we create two arrays, one holding the images and one holding the links. Of course, the first link is for the first image, the second link for the second image etc. Note that I do not call the links array links, because that's a reserved word and would lead to JavaScript errors. Therefore I chose the name linx.

Fill in your own banners and links here.

var banners = new Array(
	'pix/mo_home.gif',
	'pix/mo_home_omo.gif',
	'pix/mo_place.gif',
	'pix/mo_place_omo.gif');
var linx = new Array(
	'intro.html',
	'intro.html',
	'placejs.html',
	'placejs.html');

Then we define two variables current and old to store the current banner and the previous banner.

var old = 0;
var current = 0;

Then comes the script that performs the actual switch. This is called the first time onLoad, when the complete page has been loaded.

function init()
{

First of all, if document.images is not supported we stop the function immediately, since it would only lead to errors.

	if (!document.images) return

Then we draw a new random number between 0 and banners.length (the total number of banners). The only thing we have to take care of is that the new number is not the same as the old, since then the banner would not appear to switch. So while current (new number) is the same as old (old number), we draw a new random. Only when current is different from old do we proceed.

	while (current == old)
	{
		current = Math.floor(Math.random()*banners.length);
	}

Then we make old the same as current for comparision the next time a new random is drawn.

	old = current;

Then we perform the actual image switch. Image 'banner' gets a new source: banners[current], the newly drawn random banner.

	document.images['banner'].src = banners[current];

Finally, we set the function to run again in 2 seconds (2000 milliseconds).

	setTimeout('init()',2000);
}

Then comes the function sendPage() to send someone who clicks on the link to the correct page:

function sendPage()
{
	location.href = linx[current];
}

In this case the link opens in the same page. If you want to start up an new window when someone clicks the banner, do:

function sendPage()
{
	var newwin = window.open(linx[current],'','');
}

Of course you can also start up the link in another frame or in a real pop-up.

Finally, call init() onLoad

<body onload="init()">

and place the banner in your page

<a href="javascript:sendpage()"><img
	src="pix/mo_home.gif" name="banner"
	width=80 height=50 border=0></a>