window.onload = rolloverInit;
<!-- this function initiates the rollover -->
function rolloverInit() {
for (var i=0; i<document.images.length; i++) {
if (document.images[i].parentNode.id == "nav") {
setupRollover(document.images[i]);
		}
	}
}
<!-- this function calls the onmouseout state of the rollover based on the image source -->
function setupRollover(thisImage) {
	/* alert (thisImage.id); */
thisImage.outImage = new Image();
thisImage.outImage.src = thisImage.src;
thisImage.onmouseout = rollOut;
<!-- this performs the rollover based on the image src plus the variable "_roll.gif" on the end of it -->
thisImage.overImage = new Image();
var pre = '';
pre = thisImage.src.replace("images/navigation/" + thisImage.id + ".gif", "");
thisImage.overImage.src = pre + "images/navigation/" + thisImage.id + "_roll.gif";
thisImage.onmouseover = rollOver;	
}
<!-- these functions perform the setupRollover function -->
function rollOver() {
this.src = this.overImage.src;
}

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