// JavaScript Document

/* This script will find all images on the page with the class name "rollover".
It will preload an alternative image and create a rollover image effect when the
cursor is hovered.

IMPORTANT !
In order to work the alternative image must be in the SAME directory with "_rollover" added to
the image file name.

For example:
 * The original file is "MyImage.jpg"
 * The alternative image must be called "MyImage_rollover.jpg"
 
 This script works with .jpg, .jpeg, .gif, .png files.
 
 */
 
$(document).ready(function() {
$('.rollover').each(function() {
	var imgFile = $(this).attr('src');
	var preloadImage = new Image();
  	var imgExt = /(\.\w{3,4}$)/;
  	preloadImage.src = imgFile.replace(imgExt,'_rollover$1');
		
	$(this).hover(
		function() {
			$(this).attr('src', preloadImage.src);
		},
		function () {
			$(this).attr('src', imgFile);
		}
	); // end hover
}); // end each
}); // end ready()