Image Replacement | Locawebers
por Marco Bruno em CSS Nenhum comentário
O que é image replacement?
Basicamente, image replacement é uma técnica que substiui um texto por uma imagem.
A grande discussão gerada pelas técnicas de image replacement, é que algumas delas utilizam o atributo css "text-indent" com valores altos para esconder o texto que será substituido pela imagem, esta abordagem deve ser evitada. Vamos parar para pensar!
Caso a imagem que está substituindo o texto não carregue por algum motivo e o css seja carregado normalmente, teremos um espaço sem conteúdo, com isso, teremos dois grandes problemas: primeiro essa não é uma boa prática de SEO e segundo o usuário fica sem acesso ao conteúdo.
Pronto, agora que já sabemos o que é Image Replacement e quais são as práticas que devemos evitar, vamos ao nosso exemplo.
Teremos dois exemplos, uma que vamos utilizar uma tag vazia(<span></span>) e a segunda situação sem a tag vazia.
Com a tag vazia(<span></span>):
Este primeiro exemplo será o menu principal do site, e ele tem a necessidade de ser um botão, ou seja, o link será substituido por uma imagem.
&lt;ul class="menu-com-tag">
&lt;li>&lt;a href="#" class="first replacement">Home&lt;span>&lt;/span>&lt;/a>&lt;/li>
&lt;li>&lt;a href="#" class="second replacement">Fotos&lt;span>&lt;/span>&lt;/a>&lt;/li>
&lt;li>&lt;a href="#" class="third replacement">Contatos&lt;span>&lt;/span>&lt;/a>&lt;/li>
.replacement { position: relative; display: block; }
.replacement span {
.menu-com-tag a {
width: 73px; height: 15px;
.menu-com-tag span { background: url('sprite-com-span.png'); }
.first:hover span { background-position: left -35px; }
.second span { background-position: left -70px; }
.second:hover span { background-position: left -105px; }
.third span { background-position: left -140px; }
.third:hover span { background-position: left -175px; }
Sem tag vazia
Neste segundo exemplo vamos utilizar o menu principal do site novamente, mas agora vamos trocar a idéia do botão por um icone. Não teremos a necessidade de utilizar uma técnica de image replacement, vamos realizar uma técnica mais simples. Bem mais simples! Lembrando que as duas situações são diferentes e esta não é uma técnica de image replacement.
&lt;ul class="menu-sem-tag">
&lt;li class="primeiro">&lt;a href="#">Home&lt;/a>&lt;/li>
&lt;li class="segundo">&lt;a href="#">Fotos&lt;/a>&lt;/li>
&lt;li class="terceiro">&lt;a href="#">Contatos&lt;/a>&lt;/li>
.menu-sem-tag li {
background: url('sprite-sem-span.png') no-repeat;
.primeiro:hover { background-position: left -27px; }
.menu-sem-tag .segundo { background-position: left -54px; }
.menu-sem-tag .segundo:hover { background-position: left -80px; }
.menu-sem-tag .terceiro { background-position: left -106px; }
.menu-sem-tag .terceiro:hover { background-position: left -133px; }
.menu-sem-tag a { color: #ff3636; text-decoration: none; }
.menu-sem-tag a:hover { color: #000; }
Caso esteja curioso para saber mais detalhes sobre as demais técnicas de image replacement, tem um bom tutorial do Maujor: