SIMPLES ROLLOVER EM IMAGENS COM CSS

Postado em: 19 de março de 2007 por Pedro Rogério

Antigamente para se fazer rollover em imagens utilizava-se de JavaScript, utilizando os eventos onMouseOver e onMouseOut, e também de 2 imagens separadas, mas com CSS, você simplesmente precisa de uma só imagem com os 2 estados, ode iremos deslocar a imagem para as coordenadas necessárias para que tenhamos o efeito de rollover. Utilizaremos a seguinte imagem nesse tutorial:

O CSS:


a.srollover {
    display: block;
    width: 22px;
    height: 22px;
    background: url("pbox_close.gif") 0 0 no-repeat;
    text-decoration: none;
}

a:hover.srollover {
    background-position: -22px 0;
}

Se repararem, a imagem possui 44 pixels de largura, mas no CSS eu só marquei 22 e posicionei a imagem a 0 pixels de sua margem, por que logo após, eu criei uma regra para que a imagem se desloque no eixo X 22 pixels para a esquerda, é onde acontece o efeito de rollover. O HTML fica da seguinte forma:


<a class="srollover" href="#">&nbsp;</a>

Veja um exemplo em funcionamento. Esse tutorial foi retirado do site: Find Motive.

Se tiver um tempo, leiam também:

Sobre Pedro Rogério

Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web é proprietário do blog CSS no Lanche, blog voltado ao desenvolvimento front-end.

Deixe seu comentário

9 comentários para esse post

Micox disse: 19.03.07 ás 08:10

#1

Umm, interessantísima técnica.
É bom aprender coisas novas diferentes, alternativas.
Lucas Ferreira disse: 19.03.07 ás 08:47

#2

Olá,

Não seria, a.srollover:hover ao invés de a:hover.srollover ?
Pedro Rogério disse: 19.03.07 ás 17:09

#3

@Lucas

Das duas formas funcionam corretamente!!!
Leonardo Procópio disse: 19.03.07 ás 18:00

#4

Dessa forma eu nunca tentei não, pra mim so dava pra fazer como o lucas disse.
Mas é bom saber!!!
Ricardo disse: 19.03.07 ás 19:40

#5

Uma vez fiz um codigo “bunitinho” p/ isso ae, mas usando javascript..

Que descepção…
Não consigo achar uma vantagem em usar o Js..

Idéia muito criativa!!
Tiago Celestino disse: 19.03.07 ás 21:18

#6

Para aqueles que se matam para fazer um menu lindo essa é a dica perfeita
Leonardo disse: 22.03.07 ás 11:54

#7

Interessante a técnica, mas quem não conhecia isso por favor né???
Isso é muito antigo…
Carlos Eduardo disse: 24.03.07 ás 14:33

#8

Gostei, pra caramba! poderia ensinar como faz esse efeito nos formulários do seu site!
Rodrigo disse: 02.07.09 ás 19:17

#9

Olá! essa técnica não funciona no SYMBIAM!!!