Listas com imagem de fundo clicável

Escrever um artigo mostrando uma técnica CSS rudimentar e óbvia pode causar algum mal? Eu creio que não, e assim a técnica mostrada a seguir poderá ser útil (ou não) para você, dependendo do seu nível de conhecimento de CSS.

Objetivo

Construir com uso de uma lista não ordenada uma sequência de links cada um deles com um ícone (puramente decorativo) posicionado à esquerda e definidos via CSS — os ícones serão também clicáveis.

Frequentemente eu uso a propriedade background-image nos itens de uma lista não ordenada para definir os marcadores da lista. Definindo background para o elemento <li> é o suficiente para conseguir este efeito. E, se a lista contiver links e nosso desejo seja o de fazer com que a imagem também seja clicável?

Como obter o efeito desejado

O primeiro passo é construir uma lista não ordenada definindo uma id para cada item da lista. Esta id será importante para definir o ícone correspondente a cada link, como veremos a seguir.

  
<ul>
  <li id="email"><a href="email">Enviar email</a></li>
  <li id="doacao"><a href="doacao">Fazer uma doação</a></li>
  <li id="alerta"><a href="alerta">Alertas</a></li>
  <li id="amigo"><a href="amigo">Enviar a um amigo</a></li>
  <li id="votar"><a href="votar">Registro para votar</a></li>
</ul> 

A seguir vamos adicionar as regras CSS, que são bem simples. Estas regras retiram os marcadores default das listas, zeram as margens e os paddings e definem uma background-image para cada elemento <li>.

 
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  }
ul li {
  margin: 2px 0 6px 0; 
  padding: 0;
  font-weight: bold;
  line-height: 24px; /* altura do ícone */>
  background-repeat: no-repeat;
  background-position: 0 50%;
  }
ul li a {
  padding-left: 30px; /* largura do ícone + espaço em branco */  }
#email { background-image: url(email.gif); }
#doacao { background-image: url(doacao.gif); }
#amigo { background-image: url(amigo.gif); }
#alerta { background-image: url(alerta.gif); }
#votar { background-image: url(votar.gif); }

Observe nas regras acima que definimos um padding-left igual a no mínimo a largura do ícone. Isto faz com que a área clicável "estenda-se" por sobre o ícone — que foi definido como fundo de cada elemento <li> individualmente.

Observe também a regra que define uma line-height. Definindo para esta propriedade um valor igual a altura do ícone conseguimos que a imagem não seja recortada, sendo mostrada por inteiro. Este procedimento não afeta ou prejudica o redimensionamento do texto.

Efeito piscante

Porque não definir a imagem do fundo no elemento <a>? Porque esta opção causará o efeito piscante flickering problems no IE6/Win. Colocando a imagem de fundo no elemento <li> e "estendendo" a largura do link por sobre a image evitaremos aquele efeito e, está é a razão principal para este artigo ter sido escrito.

Você poderá ainda estar intrigado se perguntado qual a razão de não se inserir as imagens diretamente na marcação com uso de tags <img>. Na verdade não existe uma razão. Contudo o método mostrado constitue-se em uma maneira simples de manter as imagens não essenciais nas CSS e fora da marcação, facilitando futuras eventuais modificações nas listas e imagens.

Créditos

Este artigo é uma tradução do original em ingles de Dan Cederholm
publicado em http://www.simplebits.com/notebook/2004/07/18/clickable.html