onmouseover & getElementById; am I doing it right?

[tomrshl]

I am trying to alter Playa to use input type images instead of buttons. Part of this involves the need for a rollover image eg. a play button highlights when the cursor is over it. This is the code I have:

if (Playa.btnState == "Stop") {
document.getElementById("btnPlayStop").onmouseover = "this.src='images/stophover.gif'"
document.getElementById("btnPlayStop").onmouseout = "this.src='images/stop.gif'";
}
else {
document.getElementById("btnPlayStop").onmouseover = "this.src='images/playhover.gif'";
document.getElementById("btnPlayStop").onmouseout = "this.src='images/play.gif'";
}


<input type="image" src="images/stop.gif" onmouseover="this.src='images/stophover.gif'" onmouseout="this.src='images/stop.gif'" alt="Stop" id="btnPlayStop" onclick="Playa.doPlayStop();" />

Playa.btnState is the alt tag to say whether the state is stopped or started. I have the code working to alternate between "Play" and "Stop" images when the button is clicked, but the rollover doesn't happen.

Any ideas?
Thanks

[Amphiluke]

Try this:

if (Playa.btnState == "Stop") {
document.getElementById("btnPlayStop").onmouseover = function() {this.src='images/stophover.gif'};
document.getElementById("btnPlayStop").onmouseout = function() {this.src='images/stop.gif'};
}
else {
document.getElementById("btnPlayStop").onmouseover = function() {this.src='images/playhover.gif'};
document.getElementById("btnPlayStop").onmouseout = function() {this.src='images/play.gif'};
}

Note that in this case the onmouseout and onmouseover attributes should contain a function reference, not a string.

[tomrshl]

Thanks for the reply, I worked it out another way, but I will give yours a try too.

This is what works for me:

//	Rollover functions for Start/Stop
	
		function mouseOn() {
			if (Playa.btnState == "Stop") {
				document.getElementById("btnPlayStop").src = "images/stophover.gif";
			}
			else {
				document.getElementById("btnPlayStop").src = "images/playhover.gif";
			}
		}
		function mouseOff() {
			if (Playa.btnState == "Stop") {
				document.getElementById("btnPlayStop").src = "images/stop.gif";
			}
			else {
				document.getElementById("btnPlayStop").src = "images/play.gif";
			}
		}

With onmouseover="mouseOn();" onmouseout="mouseOff(); in the html

Thanks again