# Rafael.Barbolo

Hoje, na Poli, meu amigo sabichão Roberto Sonnino estava dando dicas de CSS que é algo que eu conheço e uso com pouco domínio. Entre elas, estava o exemplo de como utilizar links em imagens sem perder seus conteúdos (textos).

É importante que ao colocar link em uma imagem você especifique em texto o que este link representa. É através dele que Sistemas de Busca como Google, Yahoo, LiveSearch entre outros vão avaliar a relevância da sua página e decidir se devem mostrá-la com maior prioridade em determinadas buscas.

Para exemplificar a técnica, imagine que você tenha um logo em seu site que possua link. O modo mais comum de se encontrar logos linkados na internet é com o seguinte código no html:

<a href=”http:www.enderecodestino.com”>

<img src=”http://www.enderecodologo.x.y/logo.gif”>

</a>

Para aplicarmos a técnica neste logo, devemos primeiro criar um header que definirá o que a imagem representa (ao invés do header, poderia também ter um div ou alguma tag específica). No HTML fazemos apenas algo como:
<a href=”http:www.enderecodestino.com”>

<h1>Conteúdo da Imagem</h1>

</a>

Agora no arquivo .css que define a estrutura da página, colocamos um código parecido com o seguinte:

h1 {

background: url(http://www.enderecodologo.x.y/logo.png);

text-indent: -10000px;

}

Para visualizar um exemplo de uso desta técnica, entre no link: Exemplo de Imagem com Link

Se você utiliza o firefox, você pode clicar em Exibir, Estilos da Página, Sem Estilos. Assim você poderá visualizar o que é visto por um sistema de busca padrão: apenas texto.