The Linked Image Swap Tutorial

View Demo

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 */
}

ADVERTISE HERE