// JavaScript Document
window.onload = rolloverInit;
//this is to make sure everything load in the page before the script is executed

function rolloverInit() {
	for (var i=0; i<document.images.length; i++) {
// the rolloverInit function scans each image on the page to see if the tag around the image 
// is a <a> tag (link), the loop set the counter i to 0 , if the value of i is < of the number of
// image on the doc, it increment i by 1
		if (document.images[i].parentNode.tagName == "A") {
//test if tag around image is a link 
// document.images[i] is the current image 
// parentNode is the container tag that surround the image 
// tagName provides the name of the container tag 
		setupRollover(document.images[i]);
// the setup rollover is called and passed to the current image
		}
	}
}

function setupRollover(thisImage) {
// this function add 2 new property  out image and over image 	
	thisImage.outImage = new Image();
//takes the image object that was passed in and adds the new outimage property to it
	thisImage.outImage.src = thisImage.src;
// set the source of the image (default src)
	thisImage.onmouseout = rollOut;
// tell the browser to to trigger the rollOut() function
	thisImage.overImage = new Image();
// create the new image object that will contain the over version of the img 
	thisImage.overImage.src = "img/" + thisImage.id + "2.png";
// set the source for over img 
	thisImage.onmouseover = rollOver;
// tell the browser to trigger the rollOver() function
}

function rollOver() {
// reset the src of the img
	this.src = this.overImage.src;
}

function rollOut() {
// reset the default value
	this.src = this.outImage.src;
}