Criando um efeito rollover com CSS

Por Erika Sarti, em 23_10_2007.

Introdução

O efeito rollover é aquele que troca uma imagem por outra quando o usuário passa o mouse sobre ela. Quando bem usado, esse recurso pode incrementar uma página ou um site de maneira significativa. A maneira mais comum de obtermos esse efeito é através de um código em JavaScript, mas também é possível chegar a esse resultado apenas com CSS (Cascading Style Sheets). É isso que você verá neste rápido tutorial. Antes de prosseguir, saiba que é importante ter algum conhecimento de HTML ou mesmo de CSS para que o procedimento dê certo.


Criando o efeito rollover

A vantagem de se utilizar o efeito rollover é que essa técnica dispensa o uso do preload, ou seja, a imagem que aparecerá quando o usuário disparar o evento não precisa ser carregada previamente para que o efeito funcione da maneira desejada.


Exemplo de rollover com CSS (passe o mouse para ver o efeito)

Acompanhe o passo a passo de criação:

1º passo: crie sua imagem

A principal diferença entre o rollover com CSS e o efeito com JavaScript está aqui: ao invés de duas figuras, você tem apenas uma, contendo a imagem nos seus dois estados, que terá a posição alterada quando o usuário disparar o evento.

Usando o editor de imagens de sua preferência, crie sua imagem como na figura abaixo - na metade superior, a imagem como aparecerá no site; na metade inferior, a imagem que aparecerá quando acontecer o efeito rollover.

Imagem para o efeito rollover

2º passo: crie seu arquivo HTML

Vamos criar o arquivo HTML:

<html>
	<head>
	<title>Criando um efeito rollover com CSS</title>
	<link href="rollover.css" rel="stylesheet" type="text/css" />
	</head>

	<body>
	<p><a href="http://www.infowester.com/" id="efeito">InfoWester</a></p>
	</body>
	</html>

Perceba que não usamos a tag <img> para exibir nossa imagem, e sim um link. Isso é importante, pois dessa maneira, garantimos que mesmo o usuário com as imagens ou o CSS desabilitado em seu navegador vai conseguir acessar o link sem problemas.

3º passo: crie seu arquivo CSS

Com o CSS vamos transformar o link em uma imagem:

<!--

	#efeito		{
			width: 207px; height: 19px;
			overflow: hidden;
			background: url(rollover.gif) top left no-repeat;
			display: block;
			text-indent: 10000px;
			}
	 
	#efeito:hover	{
			background-position: bottom left;
			}
			
	-->

Explicando o código: o atributo width: 207px; define a largura da imagem. Lembre-se de que no primeiro passo definimos os dois estados da imagem no mesmo arquivo; por isso, atribuiremos à imagem apenas metade da sua altura (neste exemplo, 19 pixels: height: 19px;), já que a parte de baixo "trocará de lugar" com a parte de cima no momento que o efeito rollover ocorrer. Isso deixa claro que é importante medir com precisão o tamanho de sua imagem para dividí-la exatamente ao meio, do contrário, o efeito pode ter falhas.

Por sua vez, o atributo overflow: hidden; define que o link terá exatamente o tamanho definido, e que qualquer "sobra" da imagem será cortada.

No entanto, o truque está mesmo no atributo background:. Repare na seguinte linha:

background: url(rollover.gif) top left no-repeat;

Ela define a imagem de fundo e o posicionamento dela: alinhada pelo topo, à esquerda e sem repetição.

O atributo display: block;, que vem logo abaixo, tranforma nosso link em um "bloco", e o text-indent: 10000px; esconde o texto do link.

Por fim, o atributo

background-position: bottom left;

define que, ao passar o mouse sobre a imagem, ela se alinhará pela base e à esquerda, exibindo assim a metade de baixo do arquivo.

Depois de criado o código, salve o arquivo CSS (ou implemente na própria página HTML, se desejar). Neste exemplo, o arquivo recebeu o nome de rollover.css. Repare que, no código HTML do 2º passo, esse arquivo é "chamado" na quarta linha.


Finalizando

Se você seguiu os passos corretamente, deve ter percebido como é fácil criar o efeito rollover. Com um pouco de prática, você pode aplicar a mesma idéia em vários elementos de uma mesma página. Com o mesmo código e um pouco de imaginação, também é possível usar esse efeito em menus, botões de formulário e praticamente quaisquer outros elementos da sua página HTML.


Erika Sarti é web designer e trabalha como free-lancer desde 2000, sendo também responsável pelo layout do InfoWester. Mais informações em seu blog - www.erikasarti.com - e em seu portfólio - www.erikasarti.net -.