The banner above is the one that is being rotated via the script. The banner below is on behalf of freeyellow.com in exchange for their free hosting.

RotatorScript

RotatorScript is a set of JavaScript code that will rotate a number of banners in a fixed location at a user-definable interval, much the way the Rotator Applet does, except it does it from JavaScript instead of within a Java Applet. Like the Rotator Applet, the RotatorScript will also pause the banner swapping while the user's mouse is over the banner so that the user will not accidentally click one banner just as it is being swapped and end up being taken to the wrong URL. Many times, JavaScript is a better solution to a need than Java is. This is one of those times.

JavaScript code will execute faster most of the time because there is no need to initialize the Java Virtual Machine (JVM) prior to executing the script the way the JVM must be initialized in order to load and run an applet. Also, loading the applet over the network is a time-consuming task in itself whereas the JavaScript code is loaded along with the html since it resides in the html. Furthermore, in the comparison between Rotator and RotatorScript, Rotator must make an additional network connection to download a banner manifest file.

The script is divided into three (3) parts: 1) the working functions in the head section, 2) the onLoad event handler in the body tag, and 3) the initial banner html code that will be replaced during the rotations.

Here is the function code for the head section:

//Author: Mark Ganson
	//Date: 3/10/2000
	//Site: http://www.bigfoot.com/~java4free
	
	var nCurrentBanner = 0;
	var bPause = false;

//replace these links with the appropriate href portion of your banner code
	//example: <a href="java4free.html"><img src="java4freebanner.jpg></a>
	//in the above example, "java4free.html" is the link string
	//and "java4freebanner.jpg" is the image string
	
	//href parts
	strLinks = new Array (
	
	"http://www.commission-junction.com/track/track.dll?AID=10347&PID=296657&URL=http%3A%2F%2Fwww%2Ecj%2Ecom%2FAffiliate%2Findex%2Easp",

"http://www.bigfoot.com/~java4free.html",
	"http://www.bigfoot.com/~powerballpicker.html",
	"http://www.bigfoot.com/~nflpicker.html"
	
	);

//img parts
	strImages = new Array (

"commissionjunction.gif",
	"Java4FreeBanner.gif",
	"PowerballPicker.jpg",
	"NFLPickerBanner.gif"
	
	);

//status bar messages
	//comment out this block if you don't want status bar messages
	strMessages = new Array(

"Commission-Junction.  Get paid!",
	"Java4Free!  Free webtools for webmasters!",
	"Free play applet ranks winning powerball numbers!",
	"Free play applet handicaps NFL games against Vegas!"

);

function rotateBanner(){

if (bPause){
			return;
		}

//following code assumes that the banner will be the first link/image
		//in your html page.  If this is not correct, you will need to modify
		//the value in between the [] accordingly.  For example, if you have
		//2 banners appearing before this banner in your html, you would replace
		//the [0] with [2] in the lines below.
		
		document.links[0].href = strLinks[nCurrentBanner];
		document.images[0].src = strImages[nCurrentBanner];
		
		//comment out the following line if you don't want status bar messages
		window.status = strMessages[nCurrentBanner];

//now rotate for next iteration
		if (nCurrentBanner < strLinks.length-1){
			nCurrentBanner++;
		} else {
			nCurrentBanner = 0;
		}
	}

function pause(){
		bPause=true;
	}

function resume(){
		bPause=false;
	}

// -->
</script>

Be sure to place the above code between the < head > and < /head > tags. Also, you will need to add an onLoad event handler to the < body > tag to get the ball rolling as was done on this page:
Modify the 20000 in the above code to your desired interval length. For example, use 30000 if you would like to rotate banners every 30 seconds. I chose to rotate the banners for demonstration purposes at 20 second intervals. However, you will probably want a longer time in between the rotations.

The final step is to add the initial banner code to your html page. This banner code will be replaced dynamically as the javascript:rotateBanner() function is called at the specified intervals above. Here is the code that was used on this page:

The rotation functions in the head section of the code was designed under the assumption that the banner to be swapped will be the first hyperlink and first image to appear in the html code. If you have hyperlinks and/or images appearing ahead of the banner, you will need to modify the functions to account for this. The modifications have to be don in the rotateBanners() function. The browser will enumerate the links[] and images[] arrays beginning with 0 and incrementing with each hyperlink and image that is encountered such that the first link in a page can always be referred to as document.links[0], the second link as document.links[1], the third image as document.images[2], etc.

Obviously, using this script will require a bit of modification on your part, but have no fear, it should be fairly easy to make those changes even if you have little or no experience with JavaScript since the code is very straightforward. If you run into any problems or have any questions, e-mail me and I'll try to help you out.

Here is a link to a modification I recently made to rotate 2 different banners at the top of the page. Note that the banners will appear to be identical to each other for the first few banner swaps, but that is just because I was too lazy to put new href and img information into the new arrays. Double banner rotation example.

Java4Free! Home