## 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.

<a href="" onClick="clickLink(); return false;" onMouseOver="descript(); return true;" onMouseOut="window.status=''"><img src="YOUR IMAGE #1" border=0 name="banner"></a>

    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