Pular para conteúdo 
Зеленый кофе

O autor

Carlos Eduardo de Souza, Front-End Developer & Interface Designer na Coopers Digital Production, dedica seu tempo para o desenvolvimento de uma Web mais acessível. Possui certificado W3C em Mobile (sites e web apps) e HTML5.

Portfolio e blog sobre Web Standards – project.47, de Carlos Eduardo de Souza

Blog

Topo 14/05/07

Rollover com imagens

Com a evolução do CSS e da criatividade no desenvolvimento de layouts, alguns efeitos como o rollover de imagens tornaram-se muito comuns. Para aqueles que não sabem, o efeito rollover faz a troca de imagens quando o usuário passa o mouse por determinado elemento em seu site.

É um recurso muito interessante em botőes, ícones, etc., e este post tem como objetivo exemplificar uma maneira fácil e rápida de fazer este efeito. O raciocínio é o seguinte: cria-se um link que tenha largura e altura definidas, com uma imagem de fundo (prevendo os dois estados) que troca de posição quando se passa o mouse por este elemento.

Passo 1: Crie a imagem com os dois “estados” do rollover, ou seja, a imagem do modo normal e, ao seu lado, a imagem com o efeito previsto quando o usuário passa o mouse pelo objeto. No final, é criada uma imagem com a altura desejada para o link e largura correspondente ao dobro, já que os dois estados do botão estão juntos na mesma imagem.

Exemplo de rollover

Passo 2: Faça o [tag]HTML[/tag] para este objeto, por exemplo um link:

<a href="#" id="rollover" title="Exemplo Rollover">Exemplo Rollover</a>

Passo 3: Agora vem a parte interessante. Deve-se estilizar o link desenvolvido anteriormente, via [tag]CSS[/tag], para que este tenha a imagem criada (passo 1) como fundo, além de definir a mudança de posição do fundo durante a passagem do mouse sobre o elemento, criando o efeito rollover:

a#rollover { display: block; width: 150px; height: 30px;
background: url(../images/rollover.gif) no-repeat;
font: bold 1.1em "Trebuchet MS", sans-serif; color: #fff; text-align: center; }
a#rollover:hover { background-position: right; color: #000; }

De acordo com o código CSS acima, defini o link como um elemento block, para que possa ser determinada sua largura, altura e definir a centralização do texto. A largura, como dito anteriormente, deve ser igual ŕ metade da largura da imagem criada no passo 1, pois, obviamente, pretendemos que apareça apenas um estado de cada vez.

Quando o usuário passar o mouse pelo elemento, a posição do fundo se deslocará para a direita, mostrando apenas a parte feita para criar o efeito rollover propriamente dito, além de mudar a cor do texto.

Desta maneira, criamos um efeito rollover de maneira muito fácil e prática, utilizando apenas uma imagem, aproveitando o recurso de posicionamento de fundo via CSS. O interessante é que, por se tratar de somente uma imagem, quando o usuário carregá-la, já terá os dois estados prontos.

Podemos observar que este método é muito vantajoso, pois não utiliza códigos JavaScript, por exemplo, e não depende de duas imagens diferentes, não causando aquela espera indesejável para carregar a segunda imagem, ao passar o mouse pelo elemento criado.

Assuntos: CSS, Web Design, XHTML
Trackback Feed deste artigo

4 comentários para "Rollover com imagens"

  1. Samir | 14/05/07 - 12:52 pm

    Senão me engano isso não funciona no IE, estou correto?
    Abraços

    Topo
  2. Carlos Eduardo de Souza | 14/05/07 - 2:50 pm

    Funciona, utilizo em muitos trabalhos, não só pra esse efeito rollover, mas pra imagens pequenas, como ícones, assim deixo vários em uma imagem só e, quando o usuário carrega um ícone, já vem todos de uma vez só, precisando, somente, ajustar a posição do fundo, como nesse exemplo que citei =)

    Topo
  3. Ricardo | 27/06/07 - 11:10 am

    Facilitou muito a minha vida!
    Eu estava usando rollover individual, ou seja, dois imagens diferentes para cada item do menu.
    Valeu!

    Topo
  4. Pamela | 28/07/07 - 2:23 am

    Só acreditei quando vi funcionando aqui, muito legal.
    Parabéns!
    obrigada

    Topo
Comente este artigo
  1. (obrigatório)
  2. (obrigatório)

Links Randômicos
Meta
Apoio
Créditos
Creative Commons