window.onload = rolloverInit;

function rolloverInit() {
	for (var i=0; i<document.images.length; i++) {
		if (document.getElementById) {
/*This means that if the current image doesn't have an alloted id setupRollover will not
run. Unfortunately IE runs the function wheter the image has an id or no, so to bypass
that I had to give id's for all the images and when setuupRollover wasn't needed the
picture got replaced with itself. It's bassically a redundant process but I couldn't
find a way around it.*/
			setupRollover(document.images[i]);
		}
	}
}

function setupRollover(thisImage) {
	thisImage.outImage = new Image();
	thisImage.outImage.src = thisImage.src;
	thisImage.onmouseout = rollOut;

	thisImage.overImage = new Image();
	thisImage.overImage.src = "images/" + thisImage.id + "_on.gif";
	thisImage.onmouseover = rollOver;
	
	thisImage.parentNode.childImg = thisImage;
	thisImage.parentNode.onblur = rollOutChild;
	thisImage.parentNode.onfocus = rollOverChild;
}

function rollOut() {
	this.src = this.outImage.src;
}

function rollOver() {
	this.src = this.overImage.src;
}

function rollOutChild() {
	this.childImg.src = this.childImg.outImage.src;
}

function rollOverChild(){
	this.childImg.src = this.childImg.overImage.src;
}