[HELP] How would i go about making my image show another when clicked on ?
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.
Would this work or is there another html solution ?
<img src=" URL_IMG-1 " onmouseover="images/search.png' URL_IMG-2 '" onmouseout="images/searchrollover.png' URL_IMG-1 '" /></a>
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.
<img src="img1.jpg" onclick="(this.src.indexOf('img1.jpg') >=0) ? this.setAttribute('src','img2.jpg') : this.setAttribute('src','img1.jpg');;">
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)