Image Replacement.
Por:
Wednesday 31 August 2005 Ã s 18:27Categoria: HTML / CSS / JavaScript
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.
Artigos relacionados:
- Acessibilidade, Validações e Mecanismos de Busca
- Button Replacement
- A Revolução do CSS
- Semântica de tabelas
- Requisitos de Acessibilidade e Inclusão Digital
- Dossier: Objetos Flash – Unobtrusive Flash Objects (UFO) v1.0
- Introdução a Semântica Web
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!
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. 
# 1° Flávio Theruo Kaminisse Thursday 01 September 2005 Ã s 01:55GMT
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. ;-)