Banner Rotation

  • This is a Version 3 script.
  • The rotation goes far too fast in Opera 6 TP2 on Linux.
  •  

    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 fresh()
    {
    	if (!document.images) return
    	while (current == old)
    	{
    		current = Math.floor(Math.random()*banners.length);
    	}
    	old = current;
    	document.images['banner'].src = banners[current];
    	setTimeout('fresh()',2000);
    }
    
    function sendPage()
    {
    	location.href = linx[current];
    }
    

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

    <BODY onLoad="fresh()">
    <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 fresh()
    {
    

    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('fresh()',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 fresh() onLoad

    <BODY onLoad="fresh()">
    

    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>
    

    Home