Simples rollover em imagens com CSS
Postado por: Pedro Rogério emAntigamente 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="#"> </a>
Veja um exemplo em funcionamento. Esse tutorial foi retirado do site: Find Motive.
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 também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Umm, interessantísima técnica.
É bom aprender coisas novas diferentes, alternativas.
Olá,
Não seria, a.srollover:hover ao invés de a:hover.srollover ?
@Lucas
Das duas formas funcionam corretamente!!!
Dessa forma eu nunca tentei não, pra mim so dava pra fazer como o lucas disse.
Mas é bom saber!!!
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!!
Para aqueles que se matam para fazer um menu lindo :D essa é a dica perfeita :D
Interessante a técnica, mas quem não conhecia isso por favor né???
Isso é muito antigo…
Gostei, pra caramba! poderia ensinar como faz esse efeito nos formulários do seu site!
Olá! essa técnica não funciona no SYMBIAM!!!
nao se preucupa ninguem usa SYMBIAM
KKKKKKKKKKKKKKK mando bem! A propósito legal o tuto!
Nossa, excelente, valeu mesmo.
Ainda utilizava javascript haha
Social comments and analytics for this post…
This post was mentioned on Twitter by pinceladasdaweb: Tutorial simples, muito simples sobre CSS Sprites: http://migre.me/gy2O...
tutorial muito bom e facil, me ajudou bastante! valeu
Ola! Gostaria saber como seria o código se eu quiser colocar várias imagens uma do lado a outra tipo “Mural de imagens” com 5 figuras acima e cinco figuras embaixo” .. não sei se deu para entender o que quero fazer.
Obrigado