Rotating Banner







This script rotates banners for your
page. It preloads all of the banners so the user doesn't have to wait while viewing the
page. You can adjust the speed at which it rotates. All the banners should be the same
size for this script to look good. Typical baneer sizes are 400x40 pixels. This script
also has a status bar description for each banner.



Copy this into a new page. You need to cahnge YOUR IMAGE Example 1.GIF, YOUR LINK, and
YOUR DESCRIPTION. This script is for 3 banners. At the end of the page I will describe how
to add more.

<html>

<head>
<title>Rotating Banner</title>
<script language="JavaScript">
<!-- Hide from old browsers

var i = 1;

//This is where you load your banners change 1.Gif to your banner name
banner1= new Image();
banner1.src = "1.gif";
banner2 = new Image();
banner2.src = "2.gif";
banner3 = new Image();
banner3.src = "3.gif";


//This where you make your links for the banners banners1 is linked to links[1]
links = new Array
links[1] = "index.htm"
links[2] = "info.htm"
links[3] = "headliner.htm"

//This will show up on the status bar when the mouse is moved over the banner
description = new Array
description[1] = "Main Index"
description[2] = "Info Script"
description[3] = "Head Liner"

function startTime(){

        var time= new Date();
        hours= time.getHours();
        mins= time.getMinutes();
        secs= time.getSeconds();
        closeTime=hours*3600+mins*60+secs;
        closeTime+=5;	
        Timer();

}

function Timer(){
        var time= new Date();
        hours= time.getHours();
        mins= time.getMinutes();
        secs= time.getSeconds();
        curTime=hours*3600+mins*60+secs
        if (curTime>=closeTime){
		if (i < 3){
			i++;
			document.banner.src = eval("banner" + i + ".src");
		}
		else{
			i = 1;
			document.banner.src = eval("banner" + i + ".src");
		}
		startTime();
	}
        else{
                window.setTimeout("Timer()",1000)}

}

function clickLink(){
	top.location = links[i]
}

function descript(){
	window.status = description[i]
}

// -->
</script>
</head>

<body BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#000080" ALINK="#000080"
onLoad="startTime();">

<h2 align="center">Rotating Banner</h2>
<a href onClick="clickLink(); return false;" onMouseOver="descript(); return true;"
onMouseOut="window.status=''">

<p align="center"><img src="1.gif" tppabs="http://www.calpoly.edu/~dpopeney/banner.gif"
border="0" name="banner" width="400" height="40"></a><br>
</p>
</body>
</html>


An example is:

  <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#000080"

ALINK="#000080" onLoad="startTime();">

or 
<body onLoad="startTime();">



Now put this where ever you want in your HTML document. You need to

change YOUR IMAGE #1. It must be the same as the first image in the

top of the script.



Making Additions


This will describe  how to add a third banner. First thing you need to do is add the following lines to the top script.


banner3 = new Image();
banner3.src = "YOUR IMAGE #3";

and


links[3] = "YOUR LINK #3"

and


description[3] = "YOUR DESCRIPTION #3"

Next you'll need to change the number of banners that you have. The following line tells the script

how many banners there are. It is in the top script. Change the number 2 to 3.

if (i <2){ // The number 2 is the amount of banners that you have

<2){ // The number 2 is the amount of banners that you have