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.
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="https://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 {
loading="lazy" 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 loading="lazy" 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 -.