Okay, I really want to make an image change on mouseover. Trouble is, the code on the website (http://www.lissaexplains.com/javascript3.shtml#images) isn't really working for me! The first picture shows up, but when I mouseover it doesn't change!

Could some helpful soul please explain this clearer, or even better give me an alternative way to make an image change on mouseover? Any help at all is greatly appreciated!!:chicken:

Thanks!



Please could someone help me? It's very frustrating!!

As this is a message board and not a real-time chat, you will often find yourself waiting longer than 5 minutes for a reply. Don't feel that you are being ignored, just try to have more patience; depending on how complex an issue it is, it can sometimes take days to receive an answer. If that's too long, Google ("http://www.google.com) can be a good resource in the meantime.

Try using the following method. It's not as flexible as Lissa's, but is simple.
<img src="image1.uri" alt="desriptive text" onmouseover="this.src='image2.uri'" onmouseout="this.src='image1.uri'" />

An alternative method is to use CSS like so:
a:link img {filter: alpha(opacity=100); -moz-opacity: 1.00; opacity: 1.00; border: 0}

a:hover img {filter: alpha(opacity=00); -moz-opacity: .00; opacity: .00; border: 0}

a:visited img {filter: alpha(opacity=100); -moz-opacity: 1.00; opacity: 1.00; border: 0}

a:visited:hover img {filter: alpha(opacity=00); -moz-opacity: .00; opacity: .00; border: 0}

div.hoverimage {background: url(hover.jpg) no-repeat;}
With the HTML:
<div class="hoverimage">
<a href="whatever"><img src="whatever.jpg"></a>
</div>

Replace whatever.jpg with the image you want to use, hover.jpg with the hover image, and whatever to the destination url of the link.
Tested in IE6 and FF1.5.

Hope I helped!
~WebBaka