There are many ways to create image rollover effect. there are many problems and solutions around. but when it comes to button image rollover, I think CSS only image rollover is the best solution. It loads the rollover on and off state at the same time(means when you rollover, you don’t need to wait a while for the rollover image to load), and works in most major browsers. There are two steps to make this happen:
1. First, put both state(on and off) on one single image like the one below:
2. Use the :hover pseudo-selector to shift the image’s background-position.
#nav a:hover{
background-position:-103px 0;
}
there is a demo page at:
http://www.lab.highub.com/css/css-image-rollover.php
#1 by Jason on November 28, 2008 - 4:21 am
Here’s another method:
<style>
img.nohover {border:0}
img.hover {border:0;display:none}
A:hover img.hover {display:inline}
A:hover img.nohover {display:none}
</style>
<A HREF=”#”>
<img src=”b1.gif” class=”nohover”>
<img src=”b2.gif” class=”hover”>
</A>