/* 

THIS GOES ON EACH OF YOUR PAGES IN ORDER TO PRELOAD THE IMAGES:

<SCRIPT type= "text/JavaScript">
<!--
	var imagesLocation = "images/";  //path to images
	//array of what the names are for each of the images for the navigation (about = nav_about1.gif and nav_about2.gif)
	var imagesToPreload = new Array('doc_library','events','press','membership','OeBF_groups','about');
	//-->
</SCRIPT>
<SCRIPT type= "text/JavaScript" src="jscripts/rollover.js">
</SCRIPT>


TO ACTIVATE AN IMAGE FOR ROLLOVER, USE THE FOLLOWING:


<A HREF="#" onMouseOver="change('about'),window.status='About' ;  return true" onMouseOut="change('about')"><IMG SRC="images/nav_about1.gif" ALT="About" NAME="about" WIDTH="51" HEIGHT="21" BORDER="0"></A>

The important elements here are:
1- Use the naming structure we have created when creating a new gif or jpg
2- put NAME in the image tag (example here is "about")
3- for every function change, replace 'about' with new image name


*/

if (document.images) {
	preloadedImages = new Array;

	for (i in imagesToPreload) {
		preloadedImages[i] = new Array;

		preloadedImages[i][0] = new Image;
		preloadedImages[i][0].src = imagesLocation + "nav_" + imagesToPreload[i] + "1.jpg";
		preloadedImages[i][1] = new Image;
		preloadedImages[i][1].src = imagesLocation + "nav_" + imagesToPreload[i] + "2.jpg";
	}
		
}	



function change(img) {
	if (document.images) {
		var temp = document.images[img].src
		if (temp.charAt(temp.length - 5).indexOf('1') > -1) {
			document.images[img].src = imagesLocation + "nav_" + img + "2.gif";
		} else {
			document.images[img].src = imagesLocation + "nav_" + img + "1.gif";
		}
	}
}



function changeINDEX(img) {
	if (document.images) {
		if (document.images[img].src.indexOf('1') > -1) {
			document.images[img].src = imagesLocation + "ind_nav_" + img + "2.jpg";
		} else {
			document.images[img].src = imagesLocation + "ind_nav_" + img + "1.jpg";
		}
	}
}