Image Replacement

Há diversas técnicas de substituir um texto por imagens através de Image Replacement, que é o nome pelo qual essa técnica ficou conhecida. Recentemente o Diego Eis do Tableless postou um ótimo vídeo tutorial ensinando como criar um image replacement sem usar a tag span, que é uma técnica, por incrível que pareça ainda utilizada até pelo Dave Shea no CSS Zen Garden. Claro que, eu imagino, que ele não deve ter trocado o layout do site até mesmo para não ter que modificar todos os layouts que já foram feitos até agora.

Eu estou colocando aqui três técnicas diferentes de image replacement aplicada em menus. A primeira (conteúdo indisponível) é o modelo antigo, que utiliza a tag span. Resolvi colocar aqui para ficar registrada a curiosidade para quem não conhece nenhuma das técnicas de substituição por CSS. Neste modelo você remove o conteúdo do span e coloca uma imagem no lugar. As outras duas técnicas (conteúdo indisponível) são parecidas e igualmente eficientes, não utilizando nem mais nem menos código CSS do que a outra. Ambas empurram o texto para fora da tag e o escondem utilizando overflow:hidden.

As vantagens desta técnica estão na acessibilidade e na indexação dos mecanismos de busca.