Image Replacement

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.

Image Replacement

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.

HTML:

<ul class="menu-com-tag">
	<li><a href="#" class="first replacement">Home<span></span></a></li>
	<li><a href="#" class="second replacement">Fotos<span></span></a></li>
	<li><a href="#" class="third replacement">Contatos<span></span></a></li>
</ul>

CSS:

.replacement { position: relative; display: block; }
.replacement span {
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 100%;
}

.menu-com-tag a {
	padding: 10px 0 0 10px;
	width: 73px; height: 15px;
	margin-bottom: 10px;
	font-size: 10px;
}
.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.

HTML:

<nav>
	<ul class="menu-sem-tag">
		<li class="primeiro"><a href="#">Home</a></li>
		<li class="segundo"><a href="#">Fotos</a></li>
		<li class="terceiro"><a href="#">Contatos</a></li>
	</ul>
</nav>

CSS:

.menu-sem-tag li {
	padding-left: 27px;
	height: 17px;
	background: url('sprite-sem-span.png') no-repeat;
	margin-bottom: 10px;
}
.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:
http://www.maujor.com/tutorial/image-replacement.php