window.onload = rolloverInit;
//when page loads run rolloverInitfunction
function rolloverInit() {
	//runs rolloverInit function
	for (var i=0; i<document.images.length; i++) {
		//creates a loop. i starts at 0. if i less than # images on page then add one to i
		if (document.images[i].parentNode.tagName == "A") {
			//looks at all images on page to determine if its tag name is A
			setupRollover(document.images[i]);
			//if is A then run setupRollover on image found
		}
	}
}

function setupRollover(thisImage) {
	//apply this function to current image
	thisImage.outImage = new Image();
	//add outImage property to thisImage to make a new Image object
	thisImage.outImage.src = thisImage.src;
	//sets source for outImage that is the same as thisImage(orginal file)
	thisImage.onmouseout = function() {
		//starts function when mouse not over image
		this.src = this.outImage.src;
		//replace current source w/ outImage source
	}

	thisImage.overImage = new Image();
	//create image object to contain overImage version of image
	thisImage.overImage.src = "images/" + thisImage.id + "_on.png";
	//sets source of overImage. image folder + image id + label of _on.png
	thisImage.onmouseover = function() {
		//starts function when mouse over image
		this.src = this.overImage.src;
		//replace current source w/ overImage source when mouse over image
	}
}