Image Replacement.

Por: Henrique Costa PereiraWednesday 31 August 2005 às 18:31

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 é 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 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.

Este texto não pode ser copiado ou reproduzido em nenhum outro site na íntegra sem autorização do autor!. Mais detalhes sobre licença de uso aqui!

Tags: Artigos e Estudos

11 Comentários para “Image Replacement.”

# 1° Flávio Theruo Kaminisse Thursday 1 September 2005 às 01:1 AM GMT

Parabéns Henrique, pois você esta sempre buscando construir sites focados na acessibilidade, e também para que sejamos encontrados pelos buscadores.
O mais importante na minha opinião, é que você coloca todo este conhecimento ao alcance de todos, com exemplos fáceis de serem compreendidos.
Viva o conhecimento livre. ;-)

# 2° Marco Gomes Thursday 1 September 2005 às 08:1 PM GMT

Oi, excelente site, parab�ns.

Encontrei problemas quando aumentei a fonte no Firefox, o texto estoura as caixas, dificultando a leitura. Depois vc pode ver isso.

Continuemos na luta por uma web mais sem�ntica e acess�vel � todos! At� mais!

# 3° Semântica de Títulos » Revolução Friday 9 September 2005 às 04:9 PM GMT

[...] Outra coisa a ser lembrada é que título não é um destaque qualquer. Veja por exemplo dois lugares onde você não deve usar títulos. Quando utilizar uma tabela e quiser dar um título a ela, você deve usar <caption> e não headings. <caption> é a tag correta para o título de uma tabela como eu expliquei no post Semântica de Tabelas. Quer dar um título para um conjunto de formulários para o seu site? Não use headings, use <legend>. Essas duas tags são "títulos" respectivamente para tabelas e conjunto de formulários (<filedset>). Quer usar uma imagem como título? Não tem problema, você pode usar uma técnica de CSS, como eu postei anteriormente, e colocar a imagem por estilos e no código fonte manter seus headings como texto para serem indexados pelos mecanismos de busca. [...]

# 4° Valério Farias Thursday 6 October 2005 às 01:6 PM GMT

Henrique sobre o exemplo menu2.htm que se inicia com o título:
Image Replacement

Depois segue com:
Image Replacement Modelo 2

A minha questão é: não ficaria melhor se ao invés do div
usasse a tag de título classificando melhor
a hierarquia da página?

Essa pergunta é no intuito de discutir sobre o assunto da
tag semanticamente adequada, não tenho objetivo nenhum de
minimizar ou procurar contradições em uma página bem
organizada e com conteúdo de qualidade como a sua.

# 5° Valério Farias Thursday 6 October 2005 às 01:6 PM GMT

Repetindo só que desta vez de forma legível :)

Henrique sobre o exemplo menu2.htm que se inicia com o título:
<h2>Image Replacement</h2>

Depois segue com:
<div class="tipo">Image Replacement Modelo 2</div>

a minha questão é: não ficaria melhor se ao invés do div
usasse a tag de título <h3></h3> classificando melhor
a hierarquia da página?

# 6° Lucrando na Rede » Aspectos a considerar sobre o MSN Search Wednesday 1 February 2006 às 02:1 PM GMT

[...] Sobre este último item gostaria de sugerir um artigo do Henrique: Image Replacement (o título é em Inglês, mas o texto é em excelente Português). Vem ao encontro de outras práticas saudáveis, como usar o atributo ALT em imagens e outros elementos externos ao documento HTML. [...]

# 7° Pablo Esquivel Saturday 24 June 2006 às 01:24 AM GMT

Uma velha técnica utilizada por spammers consistia em ocultar texto e links nas páginas igualando o cor da fonte com o cor do background.
Logo o Google criou metodos para banir essas páginas.
Uma pergunta é: será que substituir texto por imagens não prejudica a indexação nos motores de busca?
Alguém tem alguma informação ou links a respeito?
Pablo Esquivel
http://www.logosbr.com

# 8° Filype Sunday 23 July 2006 às 03:23 AM GMT

Henrique,
Eu posso fazer um image replacement com link??

Obrigado,
Filype

# 9° Netlus » Blog Archive » 5 Perguntas para 12 Designers Friday 18 May 2007 às 02:18 PM GMT

[...] mais concentrados na execução dos trabalhos: Image replacement. Seguida de perto pelo global reset hehehe. Mas esse último não conta, já que é padrão. [...]

# 10° Avi Alkalay Saturday 27 October 2007 às 12:27 PM GMT

Henrique, os exemplos não funcionam.

# 11° Laís Tuesday 8 April 2008 às 06:8 PM GMT

Ia comentar o mesmo que o Avi Alkalay. Os exemplos não estão funcionando, Henrique.

Avisos: Os itens com asterisco ( * ) são campos de preenchimento obrigatório.; Todos os links inseridos nos comentários possuem o atributo rel="nofollow" para impedir com que user agents (como os mecanismos de busca) sigam os links inseridos para desestimular spammers.; Todos devem se identificar através de e-mail válido.; Os e-mails dos usuários não serão divulgados no site.