Java Script Help

[Goodie069]

I am working on a web based application. In the application I am using buttons that change when you mouseover, then resore on mouseoff. What I want to do is on an onclick event, change to another image. I have tried to do an onlick event, but when the mouse moves off the button, it restores the initial image back. How can I keep the image I want for the onclick event to stay once the mouse is moved off the button?

[Jon Hanlon]

You need to check what's in the src property at the time.

<img src="original.gif" onmouseover="setSrc(this,'over')" onmouseout="setSrc(this,'out')" onclick="setSrc(this,'click')">

<script>
function setSrc(oImg,sAction) {
if (sAction == 'click') {
oImg.src = 'clicked.gif'
return true;
}
if (sAction == 'over') {
oImg.src = 'mouseover.gif'
return true;
}
if (sAction == 'out' && oImg.src != 'clicked.gif') {
oImg.src = 'mouseout.gif'
return true;
}
}
</script>

[Goodie069]

OK thanks for the help. Here is another question about the same problem. How do I get the clicked button to chage back to the original once another button is clicked? Thanks for your help.

[Jon Hanlon]

I saw this question coming a mile off...

Probably the easiest way is to use a global variable.
<img src="original.gif" id="img1" onmouseover="setSrc(this,'over')" onmouseout="setSrc(this,'out')" onclick="setSrc(this,'click')">

<script>
var gLastClicked = null; //must be outside any function

function setSrc(oImg,sAction) {
if (sAction == 'click') {
if (oImg.id == "img1") oImg.src = 'clicked1.gif'
if (oImg.id == "img2") oImg.src = 'clicked2.gif'
gLastClicked = oImg;
return true;
}
if (sAction == 'over') {
if (oImg.id == "img1") oImg.src = 'mouseover1.gif'
if (oImg.id == "img2") oImg.src = 'mouseover2.gif'
return true;
}
if (sAction == 'out' && oImg != gLastClicked) {
if (oImg.id == "img1") oImg.src = 'mouseout1.gif'
if (oImg.id == "img2") oImg.src = 'mouseout2.gif'
return true;
}
}
</script>
[/code]

[Goodie069]

Thanks Jon, you have been a great help! Worked like a charm!

Goodie