Vamos mostrar um pequeno truque para criar um efeito de rollover com imagens, porém usando um simples CSS, sem a necessidade de nenhuma outra tecnologia ou linguagem de programação. O rollover (iluminação ou mudança de cor ao passar o mouse por cima) é um feito muito simples, porém, pode dar idéias para dar maior dinamismo ao nosso site, sem que isto afete a complexidade do código.

Ademais, de passo, vamos responder uma pergunta habitual: como fazer para que os links ocupem todo o espaço da célula ou camada onde estão situados? Ou dito de outra forma: como fazer para que o link se mostre com todo o espaço disponível dentro do container no que está?

O que desejamos é que o lugar onde colocamos o link se comporte como o próprio link, assim, ao passar o mouse pelo container onde estiver situado o link (não necessariamente sobre o texto do link), se realize o efeito de iluminação.

O melhor que podemos fazer é ver o exemplo em funcionamento. Vale a pena prestar atenção a que o link muda de cor ao passar o mouse encima, porém, não faz falta se situar sobre o texto do link para que mude, e sim que serve ao posiciona-lo sobre a camada onde foi colocado o link.

O código HTML

Para realizar este efeito foi criado um código HTML como o seguinte:

<div class=navegador>
<p class=navlink><a href="#">Link 1</a></p>
<p class=navlink><a href="#">Link legal</a></p>
<p class=navlink><a href="#">Outras coisas</a></p>
</div>

Temos uma camada com estilo "class=navegador" e dentro desta, três parágrafos com estilo "class=navlink". A classe navegador conterá estilos gerais para toda a barra de navegação e os parágrafos, com classe navlink, conterão os estilos de cada linha do navegador.

Vimos que o HTML é bastante simples. Agora só temos que aplicar uns estilos bonitos para realizar o efeito buscado.

Estilos CSS

Comecemos pela camada geral, com classe "navegador", onde vamos utilizar uma declaração de estilos como esta:

.navegador{
   margin-left: 39%;
   margin-right: 42%;
}

Simplesmente, estamos lhe indicando umas margens, para que se situe onde nós quisermos, que é mais ou menos no centro da janela do navegador.

Agora vejamos a declaração do estilo da classe navlink, que é o estilo que damos a cada linha de link da barra de navegação.

.navlink {
   font-weight: bold;
   border: 1px solid #999999;
   margin:3 0 3 0px;
   padding: 2px;
}

Simplesmente indicamos em negrito, uma borda de 1 pixel, assim como uma margem e um padding.

Agora, para cada link definimos dois estilos. Um para os links em geral e outro para os links "hover", que são os que têm o mouse encima deles. Deste modo, os links sempre serão vistos de um mesmo modo e quando se colocar o mouse encima de um deles se ativará o estilo definido em hover.

.navlink a {
   background-image: url("nav-fundo2.gif");
   color: #666666;
   text-decoration: none;
   display: block;
   width: 100%;
}

.navlink a:hover {
   background-image: url("nav-fundo.gif");
   color: #ffffcc;
}

No primeiro caso (.navlink a) se indica o estilo para os links em geral. Simplesmente definimos uma imagem de fundo "nav-fundo2.gif" para os links, uma cor para o texto do link, que não apareçam sublinhados e, o mais importante, que se comportem como um bloco, que se indica com o atributo display: block;

Os links, ao se comportarem como um bloco se produzirá o efeito que estávamos buscando: que não precisa se posicionar sobre o texto do link para que mude o estilo, simplesmente o fará ao posicionar-se no container onde estão situados. Com isso, também conseguimos que o estilo dos links se transfira a todo o container. Além disso, também definimos a largura dos links a 100%, para certificarmos que ocupem todo o espaço do container onde estão situados.

No segundo caso (.navlink a:hover) simplesmente definimos um estilo distinto, utilizando uma imagem de fundo e uma cor diferente para os links. A imagem chamada "nav-fundo.gif" se mostrará como fundo do espaço onde está colocado o link. Só se modificará o estilo do link sobre o que tivermos colocado o mouse e não o dos outros links da barra de navegação.

Com isto já está feito tudo. É realmente simples. Foi provado no Internet Explorer e no Mozilla Firefox.

Agora queria comentar que também pode-se dar uma largura definida à camada onde estão todos os links, <div class=navegador>, utilizando o atributo width. Isto dá problemas no Internet Explorer na hora dos links se comportarem como um bloco, com o qual só se ativará se colocarmos o mouse no texto do link. A solução para Internet Explorer, é justamente atribuir o atributo width: 100% aos links, na classe "navlink". Este atributo width: 100% para Firefox é indiferente, com o qual o problema fica resolvido para os navegadores mais comuns.

Para finalizar, podemos ver o exemplo em uma página a parte.