Imagens Trocando Fundo DIV

[Tywin 7]

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 ?

[William Bruno 1501]

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

[Tywin 7]

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

[William Bruno 1501]

de qual parte exatamente ?

[Tywin 7]

Coloca o mouse em cima do logo pra você ver. No canto superior esquerdo.

[William Bruno 1501]

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.

[Tywin 7]

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.

[William Bruno 1501]

mas isso é simples cara, só fazer o clearInterval que nem eu disse.