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.

var imageType;

var pattern = new RegExp(/\.jpg$/);
if (!pattern.test(theImage.src)) {
	imageType = "png";
} else {
	imageType = "jpg";
	 }
     
   

theImage.outImage = new Image();
theImage.outImage.src = theImage.src; 
theImage.onmouseout = rollOut; 

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

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

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

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

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