onmouseover image change

[artistvrd]

I'm not very good with things like this because I never do them so I thought I'd give it a try, how do you change an image when you hover over it?

it's probably very simple but I couldn't find it anywhere!

THANKS!
artistvrd

[tedster]

It takes some javascript. I'm not clear whether this is just for a regular image or a navigational image, but in either case javascript is the tool you need, and for solid backwards compatibility the original image should be linked.

Let's suppose that the original image is a file named image1.gif and onmousover you want it to switch to image2.gif.

IN THE HEAD (or external .js file)
<script type="text/javascript">
switch=new Image(ww,hh)
switch.src="image2.gif"
</script>

IN THE BODY
<a href="#" onmouseover="changer.src=switch.src" onmouseout="changer.src='image1.gif'"><img src="image1.gif" name="changer" width="ww" height="hh"></a>

I was assuming you wanted the image to switch back when you move the cursor out. But if you want the switch to be "permanent", just don't use the onmouseout attribute.

[tedster]

I was just thinking that a few more comments might be helpful to remove any sense of mystery about that script --it is pretty simple, and I hate for people to do copy/paste when something is essentially easy to understand.

The key to the whole thing is that the original image was given a name attribute -- I picked "changer" in this case.

Now all script references to "changer" can directly address that image -- for example, the original <img> tag had a source attribute when the page loads. It was image1.gif. But now "changer.src" can define the source of the <img> "changer" based on a user action, such as onmouseover.

To accomplish this, we define a new image that I named "switch" and then we assign that image's source to be image2.gif. Now when a mouseover occurs, we can reassign the source of "changer" to be the same as the source of "switch". And that's all that is going on here.