Yes using only one image would be faster, but perhaps you could suggest how this technique could be accomplished using just one image when the image is in the HTML?

I just came across your site and I thought I would see if I could figure this out.

This seems to work pretty well.

The ‘img.gif’ file is a copy of this file

<style type="text/css">
a {
display:block;
width:157px;
height:27px;
overflow:hidden;
background: url(img.gif) no-repeat;
}
a:hover {
text-indent: -9999em;
line-height: 1;
background-position:-157px 0px;
}
a:hover img, a:focus img {
display: none;
}
a:focus {
background-position:-314px 0px;
}
img {
border:0;
}
</style>
<a href="#">
<img src="img.gif" alt="Image" />
</a>


Why don’t you use visibility:hidden on the img element anyway?

Yes, visibility:hidden will work too but it seems to be a case of six of one, half a dozen of another with this example.

Why don’t you use visibility:hidden on the img element anyway?