A good write up is here: Gilder Levin Image Replacemnt

This one’s great because it solves the: 1) Images off, CSS off 2) Images Off, CSS On, and 3) Images On / CSS On cases. It only has problems with transparent images.

I tend to run from transparency, as that will land you in some hacky territory, and most transparency can be faked anyway, so I’ve generally embraced this method.

Anyways, the basic idea is that you wrap an empty element in your original element, stick the text outside of the empty element, and then absolute position the element on top of the text.

No display or text-indent CSS involved at all.

The Code looks like this:


Image Name


Tightening up your CSS can really help you automate things by using a global class for the image replacement rules, and then using one single set of rules for the image paths like so:


.ir { position: relative; display: block;}
.ir em { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; display: block; background-repeat: no-repeat;}


And then your image declarations just need a height on the parent, a width, and your image like so:


.eventEmail { width: 15px; height: 15px;}
.eventEmail em { background-image: url(images/icon_eventEmail.png); }

.eventDelete { width: 15px; height: 15px; }
.eventDelete em { background-image: url(images/icon_eventDelete.png); }


Tightening those icons up even more gets you sexy CSS like this:


.eventView, .eventEdit, .eventDelete, .eventEmail { width: 14px; height: 14px;}
.eventView em { background-image: url(images/icon_eventView.png); }
.eventEdit em { background-image: url(images/icon_eventEdit.png); }
.eventDelete em { background-image: url(images/icon_eventDelete.png); }
.eventEmail em { background-image: url(images/icon_eventEmail.png); }


So that any time you need to add an icon, you just add an image and a selector above.

I’ve found this to be the best way, and JAWS absolutely loooves it. Reads it straight through without any problems at all. So you’ve got JAWS giving it the thumbs up, users that don’t look at images (think slow internet) giving it thumbs up, users that don’t use images or styling giving it thumbs up, and google loving it because its not flagging it as possible black hat. Win all around.

My point is, anytime you put anything on a page that is not visible to the usual viewer, it MIGHT be viewed as spam. Just design a good clean site, get proper links from authority sites, give good links that pass pagerank, and everything will be fine. Trying to trick google is just dangerous. If they ever decide some tactic you are using is spam-ish, then you are screwed. The worst part is that they don’t tell you what is wrong and you might never know it.

Why put anything on your site that google can see but a viewer can’t (other than the stuff required by the Disabilities Acts)?

About 3 months ago I put some crazy plugin on my WordPress site and it pulled some stupid SEO trick that got me on Google’s blocked list. Not fun. I had to go through StopBadware.org and appealed the whole thing. Thank god they fixed the problem but it took 3 months. Now what if that was a client? Oh man.