[Resolvido] Alterar Style Dentro De Intervalos On Mouse Hover

#1 Binho

Turista

Usuários
38 posts

Sexo:Masculino

Posted 07/07/2010, 01:06

Olá, pesquisei em todo lugar na internet mas não consegui adaptar um sistema para o que eu preciso.

Eu tenho uma imagem que é uma prévia de um filme, é uma imagem com 4 fotos do filme, e eu quero usar ela como prévia para um site estilo tube.
Seria assim, por exemplo a imagem de 200x200 estaria em um div de 100x100, aparecendo a primeira foto, dai eu colocaria o script onmousehover change background position style de 0 para -100, 0 isso faria aparecer a primeira imagem, e se continuar com mouse hover, depois de alguma fração de segundo mudaria novamente para 0, -100, aparecendo a terceira imagem e assim -100, -100 para aparecer a quarta imagem depois de outro tempo.
Praticamente um slide de uma imagem on hover

Por exemplo este: http://spoonfedproje...hover/index.htm
só que no caso eu precisaria que ele repetisse o processo mais duas vezes.
Caso não tenha dado pra entender é só perguntar
agradeço muito a ajuda

Binho...
http://www.exilegames.net

#2 Édipo Costa Rebouças

Veterano

Ex-Admins
1079 posts

Sexo:Masculino
Localidade:Brasil - São Paulo

Posted 07/07/2010, 10:40

para se faver algo que depende do tempo, usamos o window.setTimeout, window.setInterval, window.clearTimeout, window.clearInterval .

Binho likes this

#3 Binho

Turista

Usuários
38 posts

Sexo:Masculino

Posted 07/07/2010, 10:46

É eu vi no código da página lá, o problema é que não tenho conhecimento pra fazer funcionar da forma que preciso

Binho...
http://www.exilegames.net

#4 Édipo Costa Rebouças

Veterano

Ex-Admins
1079 posts

Sexo:Masculino
Localidade:Brasil - São Paulo

Posted 07/07/2010, 13:50

Script


VideoThumbCount = 0;
VideoTimeoutID = 0;

VideoThumbInit = function(alvo){
 VideoTimeoutID = window.setInterval(function(){
     if(VideoThumbCount!=4){
      alvo.style.backgroundPosition = '0 '+(VideoThumbCount+1)+'00px';
      VideoThumbCount++;
     }
     else{
      alvo.style.backgroundPosition = '0 0';
      VideoThumbCount = 0;
     }  
 },1000);
}

VideoThumbReset = function(alvo){
      alvo.style.backgroundPosition = '0 0';
      window.clearInterval(VideoTimeoutID); 
}

exemplo de uso:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">

VideoThumbCount = 0;
VideoTimeoutID = 0;

VideoThumbInit = function(alvo){
 VideoTimeoutID = window.setInterval(function(){
     if(VideoThumbCount!=4){
      alvo.style.backgroundPosition = '0 '+(VideoThumbCount+1)+'00px';
      VideoThumbCount++;
     }
     else{
      alvo.style.backgroundPosition = '0 0';
      VideoThumbCount = 0;
     }  
 },1000);
}

VideoThumbReset = function(alvo){
      alvo.style.backgroundPosition = '0 0';
      window.clearInterval(VideoTimeoutID); 
}
</script>
</head>
<body>
<a href="" onmouseover="VideoThumbInit(this)" onmouseout="VideoThumbReset(this)" style="display: block; height: 500px; background-image: url(http://diogoparker.files.wordpress.com/2008/11/13-daylight_planet_wallpaper_by_janedoe873.jpg)">teste</a>
</body>
</html>

Esse script vai aplicar o backgroundPosition da seguinte maneira,
"0 -100px","0 -200px","0 -300px", volta a "0 0";

Hehe, não testei uma virgula desse script, boa sorte.

Edição feita por: Édipo Costa Rebouças, 07/07/2010, 14:30.
erro no script

Binho likes this

#5 Binho

Turista

Usuários
38 posts

Sexo:Masculino

Posted 07/07/2010, 22:45

Funcionou perfeitamente!
Adaptei um pouco pra funcionar pra mim:

VideoThumbCount = 0;
VideoTimeoutID = 0;

VideoThumbInit = function(alvo){
 VideoTimeoutID = window.setInterval(function(){
     if(VideoThumbCount!=4){
      alvo.style.backgroundPosition = '-381px -81px';
      VideoThumbCount++;
     }
	      if(VideoThumbCount!=4){
      alvo.style.backgroundPosition = '-12px -356px';
      VideoThumbCount++;
     }
	      if(VideoThumbCount!=4){
      alvo.style.backgroundPosition = '-381px -356px';
      VideoThumbCount++;
     }
	 
     else{
      alvo.style.backgroundPosition = '-12px -81px';
      VideoThumbCount = 0;
     }  
 },1000);
}

VideoThumbReset = function(alvo){
      alvo.style.backgroundPosition = '-12px -81px';
      window.clearInterval(VideoTimeoutID); 
}

puts então eu achei que tinha dado certo mas não deu, ele ta pulando os ifs, da posição inicial ele vai pro terceiro if e depois ja volta pra posição inicial, não está passando pelos 4 que eu coloquei, tentei colocar else if, mudar as contagens mas não consegui o resultado, conseguem me ajudar?

Binho...
http://www.exilegames.net

#6 Édipo Costa Rebouças

Veterano

Ex-Admins
1079 posts

Sexo:Masculino
Localidade:Brasil - São Paulo

Posted 08/07/2010, 10:10


VideoThumbInit = function(alvo){

 VideoTimeoutID = window.setInterval(function(){

     if(VideoThumbCount==0){

      alvo.style.backgroundPosition = '-381px -81px';

      VideoThumbCount++;

     }

     else if(VideoThumbCount==1){

      alvo.style.backgroundPosition = '-12px -356px';

      VideoThumbCount++;

     }

     else if(VideoThumbCount==2){

      alvo.style.backgroundPosition = '-381px -356px';

      VideoThumbCount++;

     }

     else{ 

      alvo.style.backgroundPosition = '-12px -81px';

      VideoThumbCount = 0;

     }  

 },1000);

}

Binho and thioz21 curtiram esta postagem

#7 Binho

Turista

Usuários
38 posts

Sexo:Masculino

Posted 08/07/2010, 10:54

aeee eu sabia que eu tava errando algo tosco, eu tentei assim mas não usei ==, usei =

valeu!!

Binho...
http://www.exilegames.net

#1 Binho

#2 Édipo Costa Rebouças

#3 Binho

#4 Édipo Costa Rebouças

#5 Binho

#6 Édipo Costa Rebouças

#7 Binho

1 user(s) are reading this topic

Entrar