change image on mouseover

Question

I've got a simple html/css page, where I show a picture.

Now when the user moves the mouse on the picture, I'd like to swap out the picture to some other image.
Upon leaving the image area the old picture should be shown again.

How can I achieve this? A version which works without javascript would be best.

Thanks in advance!

Answer 1

You can use CSS to change the background image of an element when you hover over it. The hover pseudo-class is supported on most elements in recent browsers, but to be backwards compatible (Internet Explorer 6), you need to use an anchor tag for hover to work.

The onclick event in the link is just so that nothing happens if you click it, it has nothing with the hovering effect to do. You can of course do something when the image is clicked, if you like.

HTML:

<a href="#" id="picture" onclick="return false;"></a>

CSS:

#picture {
   display: block;
   width: 200px;
   height: 200px;
   background-image: url(firstimage.gif);
   border: none;
   text-decoration: none;
}
#picture:hover {
   background-image: url(hoverimage.gif);
}

Answer 2

This seems fairly concise and well written (note: CSS rollover solutions will not work on IE6.)

Answer 3

<img src="https://pbs.twimg.com/profile_images/677544618326556672/WID2m1_a.png" onmouseout="this.src='https://pbs.twimg.com/profile_images/677544618326556672/WID2m1_a.png'" onmouseover="this.src='https://pbs.twimg.com/profile_images/638751551457103872/KN-NzuRl.png'" alt="image" width="50px" height="50px">