#menu ul li a.home {
background:url(…caminho da img) no-repeat center left;/*aqui está*/
height:12px;
width:72px;
color:#5d7c95;
margin-left:10px;
}

Modelo:
http://www.zerojunior.com/projetos/imageReplacement/

Reparem que no JPG
(http://www.zerojunior.com/projetos/imageReplacement/images/geral/itensMenu/home.jpg)
estou utilizando o status hover acima do status normal e logo abaixo de tudo deixo a imagem em branco com a altura do status hover, para poder centralizar a imagem no status normal.

No CSS:

#menu ul li {
display:inline;
height:34px;
}/*até aqui nenhum segredo*/

#menu ul li a {
display:block;
float:left;
font-size:1px;/*escondendo o texto*/
color:#718ba2;/*camuflando ele… técnica Lindsay*/
margin:11px 0 0 7px;
overflow:hidden; /*IE6…*/
}

#menu ul li a.home {
background:url(…caminho da img) no-repeat bottom left;
height:12px;
width:72px;
color:#5d7c95;
background-position:center;/*aqui está…*/
margin-left:10px;
}

para o hover:
#menu ul li a:hover {
background-position:0px 0px;/*eis a mágica*/
height:22px;/*o status over é maior*/
margin-top:7px;
color:#121c98;
}

Para facilitar:
http://www.zerojunior.com/projetos/imageReplacement/includes/css/estrutura.css

- – - –
Enontrei esta solução na tentativa de não utilizar span, background-position negativo ou text-indent negativo. Ao invés de usar a img com os dois status e utilizar o bg-position negativo, centralizo o bg e posiciono em 0px apenas no hover. Preciso da sobra da imagem para que o posicionamento centralizado funcione.

Espero ter ajudado na contribuição.

José Roberto Junior.

Mais uma coisa, to com saudade do Blogbits, costumava colocar os podcasts no meu MP3 e ouvir sempre antes de dormir e agora to com insônia mano!

Abs!

Mas como você disse, a escolha deve ser feita com bom senso.

Já quanto à descrição das técnicas, ao meu ver, neste post você foi imparcial sim. Descreveu cada uma com seus prós e contras, de um ponto de vista mais técnico. Ao final, citou sua preferida, mas sem fazer apologia a qualquer uma delas (coisa que eu não resistira em fazer).

E isso tudo foi um elogio à sua abordagem.

Eu poderia dizer que Img Replacement também serve para facilitar a indexação pelos buscadores? Afinal estou disponibilizando um texto, o que facilita o reconhecimento do conteúdo.

Se a resposta for sim, o atributo ALT da tag IMG já não é o suficiente para isso?

Ou seja, ao invés de usar Img Replacement, eu poderia simplesmente utilizar uma IMG com ALT definido.

É mais ou menos por aí?

Pergunto isso, pois no meu blog existem diversos links franqueados no menu à esquerda e todos eles apontam direto para a Submarino. Veja que nenhum deles possui uma descrição textual do produto, mas se você procurar no Google por “Microsoft Visual C# 2005 passo a passo” verá que sou o segundo da lista.

Então surge outra dúvida: se não utilizei Img Replacement e muito menos descrevi os produtos, como é que estou aparecendo numa posição tão boa?

A única explicação, no meu ponto de vista, é o ALT das imagens.

Então eu acho que podemos concluir que hoje em dias os buscadores estão muito avançados e, portanto, para obter uma posição melhor na lista de resultados a tag IMG com ALT tem o mesmo efeito que Img Replacement.

Corrija-me se estiver errado, por favor!

Valeu!

Abraços.

Está ERRADO e sacrificar a semântica em prol de um caminho mais fácil para montar o layout não dá. Especialmente porque é possível manter semântica e apresentação corretos através da Phark.

Quanto a limitação que você citou: alguém que navega com suporte a CSS e sem suporte a imagens? Acredito que seja um caso do tipo “cabeça de bacalhau”. Existe, mas eu nunca vi.

Parabéns pela abordagem detalhada das técnicas e avaliação imparcial. =)

Eu sempre utilizei a Técnica de Gilder/Levin, com algumas alterações e nunca tive problemas até mesmo com gif’s ou png’s transparente, gostaria que avaliasse as alterações.


Titulo

h1 span {
visibility: hidden;
}


Ok, abs !