This demo shows how to use the Gilder/Levin method if image replacement. It provides a standards compliant method of having an image as a link without using text-indent: -2000px; or visibility: hidden. It is not perfect but it is pretty much the best solution out there at the moment. While I was researching I found the method documented in many places but none showed how to display an a:hover state so I thought I would rustle up this page.
OK, you have your basic unordered list containing your links. Previous methods of hiding the text meant that in a situation where a user was viewing using CSS but had images turned off, the text for the links was not visible. OK, so that is a rare occurance but you need to keep the bases covered. Also, when using the text-indent method I noticed that Firefox 1.5 extends the selected link dotted line right off the edge of the page to where the text is hidden.
Within your a tags you simply place an empty span tag. Then using CSS you effectively place that span over the text of the a tag. Simple eh? Well, when you get it right it is. Getting it to work in IE was a pain in the butt (no change there then) but I have tested and had this working in:
IE5.01 (SP2)
IE 5.5 (SP2)
IE6
FFox 1.5
Opera 7
Opera 8
Safari 2 (Mac)
IE 5.2 (Mac)
FFox 1.0.4 (Mac)
Opera 8.5 (Mac)
I have commented the CSS to explain why some seemingly random stuff is there but otherwise it should all be self explanatory. Oh, and it also uses the Sprite method of having one background image for all your links that is simply moved around using CSS. I mentioned that here
Enjoy!