[HELP] How would i go about making my image show another when clicked on ?

This site is best viewed in a modern browser with JavaScript enabled.

[HELP] How would i go about making my image show another when clicked on ?

Allstar12345

Hello guys,
For my mobile web Application I wanted my icon (it runs the search commands), to display another image when I click on it so users know when it has registered the touch.

I saw this on the net but didn't try it.

<img src=" URL_IMG-1 " onmouseover="images/search.png' URL_IMG-2 '" onmouseout="images/searchrollover.png' URL_IMG-1 '"  /></a>

Would this work or is there another html solution ?

Allstar12345

anyone ?

rtrethewey

This functionality actually requires (embedded) JavaScript. I'd ordinarily create a piece of discrete JavaScript to do something like this, but....

<img src="img1.jpg" onclick="(this.src.indexOf('img1.jpg') >=0) ? this.setAttribute('src','img2.jpg') : this.setAttribute('src','img1.jpg');;">

Good thing I tested this a bit. It turns out you can't just test for equality here when the 'src' attribute is set to a relative URL. Firefox converts it into a complete URL in my testing. So I used indexOf as a workaround, but it's probably not best practice. Someone else might chime in with a better solution.

terimxht

the #3 answer is useful?