Source Code - JsMadeEasy.com

Metachecker.net

|

TrafficChecker.net

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial


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.

Insert into <HEAD>
<script language="JavaScript"> <!-- Hide from old browsers var indexI = 1; var banner1= new Image(); banner1.src = "/images/titlebar.gif"; var banner2 = new Image(); banner2.src = "/images/titleproducts.gif"; var banner3 = new Image(); banner3.src = "/images/titlesearch.gif"; var banner4 = new Image(); banner4.src = "/images/search_header.gif"; var description = new Array(); description[1] = "YOUR DESCRIPTION #1"; description[2] = "YOUR DESCRIPTION #2"; description[3] = "YOUR DESCRIPTION #3"; description[4] = "YOUR DESCRIPTION #4"; var links = new Array(); links[1] = "/index.htm"; links[2] = "/ie5.htm"; links[3] = "/ie5.htm"; links[4] = "/ie5.htm"; function startTime() { var curDate= new Date(); hours= curDate.getHours(); mins= curDate.getMinutes(); secs= curDate.getSeconds(); closeTime=hours3600+mins60+secs; closeTime+=5; // How many seconds til the next rotation Timer(); } function Timer(){ var curDate= new Date(); hours= curDate.getHours(); mins= curDate.getMinutes(); secs= curDate.getSeconds(); curTime=hours3600+mins60+secs if (curTime>=closeTime) { if (indexI < 4)// The number 2 is the amount of banners that you have { indexI++; document.getElementById("banner").src = eval("banner" + indexI + ".src"); } else { indexI = 1; document.getElementById("banner").src = eval("banner" + indexI + ".src"); } startTime(); } else { window.setTimeout("Timer()",1000) } } function clickLink(){ top.location = links[indexI]; } function descript(){ window.status = description[indexI]; } // --> </script>

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

Other Options
You need to change this in your Head: YOUR IMAGE, YOUR LINK, and YOUR DESCRIPTION. This script is for 2 banners. 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 id="banner" name="banner"></a>