The Linked Image Swap Tutorial
This is pretty simple, so I won't go into too much detail. As you can see in the example link above you have two different options. Option One: uses two different background images and swaps them out on :hover. Option Two: uses one background image and one <img> in the html and swaps them out on :hover. I'm kinda partial to Option One only because it's a little more "trick". But, they're both coded super clean so your gold with which ever you choose to use!
One possible reason to use Option Two is if your <img> is important to the content of your site (not just for decoration). I also found under heavy load (like if having to download a song or lots of big images) IE6 and IE7 both exibited a little bit of a flicker on image swap using Option One. Option Two is free from that affliction! Alternatively, if you don't want either to be a link (only the image swap), then just remove the anchor. And in Option One only, replace the anchor with a <span></span> in order to hold the 2nd background image.
Option One
<div id="one"><a href="#"></a></div>
#one {
float:left;
height:250px;
width:350px;
background:url(images/b.jpg) 0 0 no-repeat;
border:2px solid #000;
}
#one a {
display:block;
height:250px;
background:url(images/a.jpg) 0 0 no-repeat;
text-decoration:none;
}
#one a:focus, #one a:hover, #one a:active {
background:transparent; /* or background:none; */
}
Option Two
<div id="two"><a href="#"><img src="images/a.jpg" alt=""></a></div>
#two { float:right; height:250px; width:350px; background:url(images/b.jpg) 0 0 no-repeat; border:2px solid #000; } #two a { display:block; height:250px; text-decoration:none; } #two a:active img, #two a:focus img, #two a:hover img { width:0; /* or margin-top:-999em or display:none or visibility:hidden */ } #two a:hover { visibility:visible; /* IE6 needs this to swap images */ }