Most of us have at one time or another have had to (or tried unsuccessfully to) alternate an image on mouse over. Most commonly, this is effect is used to provide a response when a visitor runs their mouse over a button, like the one below:

Now, this was very easy to create, using just the following CSS:
.buttonexample{background-image: url(images/button.gif); width:91px; height:28px;}
.buttonexample:hover{background-image: url(images/button-over.gif);}and the following html:
<div class="buttonexample"></div>

If you are just hoping to make a standard image change on mouseover, without having that image link to anything, then you are almost done. To prevent the hover image from “flashing” before loading, simply follow the steps listed on our sister article: A quick look: preloading images with css.

If, however you would like to have a mouseover effect on a linked image, it’s just a little bit more complex. In addition to the code above, we will add one more line to make this:
.buttonexample{background-image: url(images/button.gif); width:91px; height:28px;}
.buttonexample:hover{background-image: url(images/button-over.gif);}
.buttonexample a{display:block;width:91px;height:28px;}and the following html:
<div class="buttonexample"><a href="#"></a></div>

This is the simplest method, but is not compatible with IE 5.5/6. This is because IE 5.5 and 6 do not recognize the “hover” attribute when applied directly to a DIV. To make this button compatible, we’ll just need to define the same variables as we did on the standard div, but for the “a” tag, like this:
.buttonexample a{background-image: url(images/button.gif); display:block;width:91px;height:28px;}
.buttonexample a:hover{background-image: url(images/button-over.gif);

Now, we have this link. Remember to change the width and height of this link to correspond with the size of your image.

Compatibility:
This method has been tested in and is compatible with Internet Explorer 5.5 and 6 (see above), 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).

That’s all folks!

If you have an idea or article that you would like to contribute, send it on! We’re always looking for good, quality articles. Note that we will not republish an article that has been published elsewhere, so keep it original!

Tags: border, css, hover, mouseover

This entry was posted on Thursday, January 17th, 2008 at 5:58 pm and is filed under css. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.