<!--
/* ---PreLoad and rollover script for named buttons --
** this scripts works best for buttons that are named gifs or jpgs

 preloads the specified images
 Length is the total number of images to be pre-loaded
 path is the relative path to the images (including the preface of the image name
 type is the extension on the image including a name ending (such as _on.gif)
  Image names must be in the format  - imageName = path + (loopNumber) + type
 Image must be named with the name referenced in rollOn and rollOff (document.images.name.src)
*/
/* Implementation:
 1) Add this script in the header
 2) Adjust image size in the new Image(xxx, yyy) line
 3) Adjust the number of images used in the preLoad lines
 4) Name the images appropriately  eg nav1.gif  nav1_on.gif
 5) Add the img name="nav1" type image names to the image tags
 6) add the rollover, rolloff calls in the <a></a> tags on the images
 7) Add the onLoad preloader to the head tag
*/
/* usage in-page:
<head>
 <script type="text/javascript" src="includes/rollover.js"></script>
</head>
<body  onLoad="PreLoadImages(howManyToLoad,'pathToImages', 'suffix:.gif or .jpg, and the suffix that shows 'on' state');">

<a href="xxx.html" onMouseOver="rollOn('nav6');" onMouseOut="rollOff('nav6');"  onfocus="this.mouseover();" onblur="this.onmouseout;"><img src="images/nav/nav6.gif" alt="x" width="148" height="35" border="0" name="nav6"></a>
*/

/*
PRELOAD - goes in page <head>
// format: imgName, imgSrc, ImgOnSrc
// new line for each image in use 
<script type="text/javascript">
imagePreloader = new Array;
imagePreloader[imagePreloader.length] = new Array('home', images/home.gif', images/home_on.gif');
imagePreloader[imagePreloader.length] = new Array('about', images/about.gif', images/about_on.gif');
imagePreloader[imagePreloader.length] = new Array('contact', images/contact.gif', images/contact_on.gif');
var oImageHolder = new Object; // create the object here so it has scope in and out of the function
preLoadImages();
</script>
.... etc


*/

function preLoadImages()
{
	if (document.images)
	{
		for (i = 0; i<imagePreloader.length; i++)
		{
		// load the image and the rollover image (..._on)
			oImageHolder[imagePreloader[i][0]] = new Image;
			oImageHolder[imagePreloader[i][0]].src = imagePreloader[i][1];
			oImageHolder[imagePreloader[i][0] + '_on'] = new Image;
			oImageHolder[imagePreloader[i][0] + '_on'].src = imagePreloader[i][2];		
		}
	}
}

// rollover and rolloff scripts are invoked as so:
//   onMouseOver="rollOn(imageNumber);" onMouseOut="rollOff(imageNumber);

// rollover 
function rollOn(imageName)
{
if(document.images)
	{
	document.images[imageName].src= oImageHolder[imageName + '_on'].src;
	}
}

// rolloff
function rollOff(imageName)
{
if(document.images)
	{
	document.images[imageName].src= oImageHolder[imageName].src;
	}
}
// -->

