/**


 this is how you would use this script:
 
 <script language="JavaScript" src="rollover.js"></script>
 <!--- start optional stuff -->
 <script language="JavaScript">
	var preload = new Array(
		"image_off.jpg",
		"image_on.jpg"
	);
	preloadImages(preload);
 </script>
 <!--- end optional stuff -->
 
 <a href="whatever"
 	onMouseOver="toggleImage('img1','image_on.jpg');"
 	onMouseOut="toggleImage('img1','image_off.jpg');">
 <img src="image_off.jpg" id="img1" name="img1"></a>
 
 

 
 
**/



var rollOvers 		= new Array();
var preloadedImages 	= new Array();

// this is what you call to rollover an image
function toggleImage(imgName,rollOversrc) {
	if (!rollOvers[imgName]) {
		rollOvers[imgName] = new RolloverObject(imgName);
		rollOvers[imgName].image.src = rollOversrc;
	}
	document.images[imgName].src = rollOversrc;
}

// this is a contructor for a RolloverObject
function RolloverObject(imgName) {
	var obj 	= new Object();
	obj.image 	= document.images[imgName];
	obj.state	= false;
	return obj;
}

// this function preloads images
function preloadImages(arrImgNames) {
	for ( var i=0; i<arrImgNames.length; i++) {
		var img = new Image();
		img.src = arrImgNames[i];
		preloadedImages[preloadedImages.length] = img;
	}
}