Image Replacement. » Revolução Etc

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?

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.

# 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.
Comentários:


Assine por feed

assinantes Assine o feed do Revolução Etc

Sobre o Revolução Etc

Foto do autor Henrique Costa Pereira O Revolução Etc é o site pessoal do Henrique C. Pereira que trabalha com design de interfaces, planejamento, arquitetura da informação e desenvolvimento para web. Ele escreve aqui sobre várias coisas relacionadas com acessibilidade, web standards, tecnologia, desenvolvimento e o que mais der na telha, além de eventualmente escrever alguma coisa ou outra para o Webinsider. Leia mais.

Livros que vão colocar minhocas na sua cabeça:

  • SEO Otimização de Sites - Paulo Teixeira
  • Não me faça pensar! - Steve Krug
  • Google Adwords a Arte da Guerra - Ricardo Vaz Monteiro
  • Design para Internet: Projetando a Experiência Perfeita - Felipe Memoria
  • Sopro no Corpo: Vive-se de Sonhos - Marco Antônio de Queiroz (MAQ)
  • 250 Segredos para Web Designers - MOLLY E. HOLZSCHLAG
  • O design do dia a dia - DONALD A. NORMAN
  • Ser e o Nada - Jean-Paul Sartre
  • Apocalípticos e Integrados - Umberto Eco
  • Ergodesign e Arquitetura de Informação - LUIZ AGNER
  • The Art and Science of Web Design - Jeffrey Veen
  • Ansiedade de Informação 2 - RICHARD SAUL WURMAN
  • Criando Páginas Web com CSS - ANDY BUDD, CAMERON MOLL, SIMON COLLISON
  • Mobile Web Design - Cameron Moll
  • Sigam-me no Twitter

Me encontre

Lugares onde digitalmente eu costumo estar presente.

Anúncios

Blogroll:

Alguns sites interessantes e blogs de amigos que eu leio com frequência. Em ordem alfabética.

Pessoas que trabalham comigo:

Sites dos colegas de trabalho na Webroom.

Já trabalharam comigo:

Som que faz a minha cabeça!

Procurando inspiração? Esta é uma breve lista do que eu ouço!

  • Diana Krall - The Very Best Of
  • U2 - How to dismantle an atomic bom
  • U2 - 18 singles
  • The Essential - Bob Dylan
  • Bob Dylan - Modern Times
  • Miles Davis - Cool & Collected
  • Miles Davis - Prestige Profiles Vol 1
  • Pink Floyd - The Division Bell
  • Pink Floyd - The wall
  • Pink Floyd - Delicate Sound Of Thunder
  • John Coltrane - The Best of John Coltrane
  • The beatles - The Beatles 1