Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa Tarde.
Eu tenho o seguinte:
CSS
.logo{
width:265px;
float:left;
margin-left: 10px;
}Esse fórum está dando bug aqui. Eu digito e só posta metade. Todo tópico que criei foi assim.
A continuação..
$('.logo').hover(function(){
$(this).css("background-image", "url(img/topo1.png)");
});Onde está topo1 é a imagem que eu quero que fique trocando quando eu passar o mouse em cima.
Tenho 4 imagens e quero que elas fiquei trocando enquanto estou com o mouse em cima do logo.
Alguém pode me ajudar ?
Entendi
Fiz assim:
$(".logo").hover(function(){
setInterval('MudaImagem()', 100);
});
function MudaImagem(){
for(var x = 1;x<=4;x++)
$('.logo').css("background-image", "url(img/topo"+x+".png)");
}Acho que minha dificuldade é mostrar uma imagem de cada vez
Vejam
www.quirky.com/how-it-works
Eu quero esse efeito
de qual parte exatamente ?
Coloca o mouse em cima do logo pra você ver. No canto superior esquerdo.
mais ou menos isso aqui cara:
http://wbruno.com.br/javascript-puro/fazendo-um-gif-animado-javascript-um-sprite-jpg/
só que ativando no evento do mouse.
Mas esse do Logo é muito complexo, estava vendo.
Por exemplo, se você tira o mouse ele para na imagem que parar.
Acho que vou desistir da ideia.
mas isso é simples cara, só fazer o clearInterval que nem eu disse.
vc vai precisar de uma mecânica igual a de um slideshow.
qndo entrar com o mouse em cima da area, dispare um setInterval que rode um loop e mostre uma imagem de cada vez.
ai qndo sair com o mouse da area, pare o setInterval com um clearInterval