“Image Replacemente” é uma técnica bastante utilizada hoje em dia quando queremos substituir um texto em nosso site por uma imagem, nos possibilitando o uso de diversos tipos de fontes etc. Abaixo coloco um exemplo utilizado aqui no blog, aonde eu substituo o texto “gustavoribeiro.net” por uma imagem chamada “logo.jpg”. A técnica é bastente simples:
Costumo utilizar sempre a tag <h1> para inserção de logo nos sites que faço, ficando assim:
<h1><a href="index.php"><span>gustavoribeiro.net</span></a></h1>
Já no CSS, aplico a imagem da logo como background da tag <a>, fazendo assim, um link para a home do site e na <span> escondo o texto para que o mesmo não apareça em cima da imagem.
h1 a {
float:left;
width:148px;
height:22px;
margin-top:9px;
background:url('img/logo.jpg') no-repeat;
}
h1 span {
position:absolute;
width:1px;
height:1px;
overflow:hidden;
visibility:hidden;
}
Dessa forma, ao utilizar-mos o Jaws ou o Lynx não iremos perder nenhuma informação disponível no site por causa de imagens. Experimente também, desabilitar o CSS utilizando a extension web developer do firefox e veja o que acontece com a imagem do logo.
ps off topic: parabéns para mim 
Cleo May 15, 2008 @ 13:30
É… essa técnica é mto boa. Dá para ser usada em botões também sem que a informação seja perdida caso as imagens nao sejam carregadas!! Esse foi pro meu delicious!!
Piolha. May 15, 2008 @ 18:24
Gacto, entendi tudooo! Hheouiehaiuheaiue ai, meus tempos de técnico. Deuzulivre, ainda bem q saí dessa vida!!
Luv ya, man. Happy b-day to you my dear… :**
Nigro May 16, 2008 @ 16:14
Cara, você me deu uma idéia que não tinha pensado outro dia no CSS, eu tava usando ‘text-indent: -5000px;’ pra esconder, quando podia usar o ‘visibility:hidden;’… mas ele é lido pelo Google quando está escondido? Sim, né? O css é só formatação! (Aquele que pergunta e se auto responde…rsrsrs)
P.S: Juro que demorei pra responder o ‘2+8′ obrigatório pra postar, que malandro! xD
Gustavo Ribeiro May 16, 2008 @ 16:44
@Nigro
Exato! Ele ainda é lido pelo google porque ele ainda esta alí, porem, invisível na tela. Ele só não será lido pelos robots se for utilizado “display:none;”.
Abs