window.onload = rolloverInit; //preloads rollover images

function rolloverInit() {
for (var i=0; i<document.images.length; i++) {
if (document.images[i].parentNode.tagName == "A" && document.images[i].parentNode.className == "rollover" ) {
setupRollover(document.images[i]);
}}}

function setupRollover(theImage) { //creating a new object called theImage.
theImage.outImage = new Image();
theImage.outImage.src = theImage.src; 
theImage.onmouseout = rollOut; 

theImage.overImage = new Image();
theImage.overImage.src = "./images/buttons/" + theImage.id + "_on.png"; 
theImage.onmouseover = rollOver;

theImage.clickImage = new Image();
theImage.clickImage.src = "./images/buttons/" + theImage.id + "_click.png";
theImage.onmousedown = rollClick;
}

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

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

function rollClick() {
this.src = this.clickImage.src;
}