So far I've got this working so that it has a rollover image, click image, and roll out image, but I don't want it to revert back to the original image when you roll out if the image has been clicked--I want it to stay on the click image until another button is clicked.

Code:
window.onload = rolloverInit;

function rolloverInit() {
	for (var i=0; i<document.images.length; i++) {
		if (document.images[i].name == "Play") {
			setupRollover(document.images[i]);
		}
	}
}

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

	thisImage.clickImage = new Image();
	thisImage.clickImage.src = "../../images/" + thisImage.id + "playbutton3.jpg";
	thisImage.onclick = rollClick;	

	thisImage.overImage = new Image();
	thisImage.overImage.src = "../../images/" + thisImage.id + "playbutton2.jpg";
	thisImage.onmouseover = rollOver;	
}

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

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

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