¿que falla en este script?

Adso · #1 (**permalink**) 20/04/2003, 19:44

Hola a todos.
Llevo ya 6 horas dándole vueltas y no hay forma de saber que es lo que estoy haciendo mal.
He hecho un script que lo que quiero que haga es mover una capa hacia abajo hasta un límite,cuando el ratón se ponga encima del botón correspondiente.
Y cuando se ponga encima del otro botón se recoja hacia arriba.
Lo que me ocurre es que el movimiento solo lo hace una vez y se sale del bucle.
El código es el siguiente:

Código:

<HTML>
<HEAD>
<TITLE>Página con Fomulario </TITLE>  </HEAD>
<BODY>
<Script language="JavaScript">
<!--
function MueveCapa(capa){
 var anty, limite=145;  
 anty= parseInt(capa.style.top);
  if (anty>limite){ 
   return true;   
   } 
   else{  
capa.style.top= anty + 10; setTimeout("MueveCapa(capa)",5);
}    
return true;  
}   
function DevuelveCapa(capa){   
 var anty1, limite=12;    
anty1=  parseInt(capa.style.top);    
if (anty1<limite){
return true;      
}    
else{      
capa.style.top= anty1 - 10;
setTimeout("DevuelveCapa(capa)",5);
}    
return true;  
} 
//--> 
</Script>   
<CENTER>  
<H3> Pantalla de Movimiento </H3>  </CENTER>   
<div id="capa1" Style="position:absolute; left:500px; 
top:0px;
visibility:visible;z-index:1;">
Esto es una prueba   
</div>   
<div id="capa2" Style="position:absolute; left:20px; top:100px;                           visibility:visible;z-index:2;">
<Form name="miform">     
<Input Type="button" Value="Mover Imagen"
onmouseover="MueveCapa(capa1);">
<Input Type="button" Value="Situar Imagen" onmouseover="DevuelveCapa(capa1);">
</Form>
</div>
</BODY>
</HTML>

¿Alguien sabe dónde está el error y por qué no baja la capa hasta el límite de 145 px y tampoco sube hasta el límite de 10 px?
Muchas gracias a todos.

Dev.Net · #2 (**permalink**) 20/04/2003, 21:51

Chamo lo que pasa es que estas haciendo una condicion no un ciclo

que quiero decir con esto cuando tu haces el rollover sobre la imagen va al if dice si anty>limite cumple la condicion y ya hasta ahi hasta que vuelvas a pasar el mouse sobre el boton...

Voy a tratar de hacer el ciclo y te lo mando...

Saludos

Adso · #3 (**permalink**) 21/04/2003, 02:07

Gracias Dev.net por tu respuesta.
En cuanto tengas algo te agradeceré que me lo mandes.
De todas formas sabiendo eso voy a intentarlo con un for a ver si me funciona.

KarlanKas · #4 (**permalink**) 21/04/2003, 02:20

Hola Adso!

Prometo mirar tu script (de hecho estoy haciendolo ya). Pero por si te sirve para darte ideas te dejo este enlace a otro post de este foro, iniciado por mi, que hace lo que estás pidiendo. Es compatible con Opera 7.0, con IE (comprobado hasta el 5.0) y con ciertas limitaciones con NS 6.2 y superiores.

Para verlo pincha sobre el smiley:

Un saludo!!

KarlanKas · #5 (**permalink**) 21/04/2003, 02:45

Hola Adso!
Lo que te pasa es muy normal... vamos que es un fallo muy común.

Lo que ocurre es que no puedes volver a emplear la variable capa en el sertimeout. Tienes que crear otra nueva con el valor de esta.

Yo te propondría que pusieras lo siguiente:

Código PHP:

  <Script language="JavaScript"> 
<!-- 
var tempcapa 
function MueveCapa(capa){ 
tempcapa=capa 
 var anty, limite=145;   
 anty= parseInt(capa.style.top); 
  if (anty>limite){  
   return true;    
   }  
   else{   
capa.style.top= anty + 10; setTimeout("MueveCapa(tempcapa)",5); 
}     
return true;   
}    
function DevuelveCapa(capa){  
tempcapa=capa   
 var anty1, limite=12;     
anty1=  parseInt(capa.style.top);     
if (anty1<limite){ 
return true;       
}     
else{       
capa.style.top= anty1 - 10; 
setTimeout("DevuelveCapa(tempcapa)",5); 
}     
return true;   
}  
//-->  
</Script>

Si te fijas hemos creado la variable tempcapa. Esa variable simplemente nos sirve para guardar el valor de capa para luego emplearlo en el seTimeout.

A mi me pasó muchas veces lo que a tí! Hasta que me di cuenta de que era por eso me volví loco.

Un saludo!!

Adso · #6 (**permalink**) 21/04/2003, 03:47

Muchas gracias por la respuesta. El código va bien excepto en una cosa.
Yo lo que quiero hacer es que cuando una capa se desplace hacia abajo la otra capa que esté abajo suba.
Como lo que tengo son tres capas la línea del onmouseover es la siguiente:

<Input Type="button" Value="capa2" onmouseover="MueveCapa(capa2); DevuelveCapa(capa1); DevuelveCapa(capa3)">

Pero lo que ocurre es que solo me devuelve una capa y la otra va subiendo cada vez que paso el ratón por el botón.
El código es este:
<HTML>
<HEAD>
<TITLE>Página con Fomulario </TITLE>
</HEAD>
<BODY>
<Script language="JavaScript">

</Script>

<CENTER>
<H3> Pantalla de Movimiento </H3>
</CENTER>

<div id="capa1" Style="position:absolute; left:500px; top:0px;
visibility:visible;z-index:1;">
Soy la capa1

</div>
<div id="capa2" Style="position:absolute; left:500px; top:0px;
visibility:visible;z-index:2;">
Soy la capa2

</div>
<div id="capa3" Style="position:absolute; left:500px; top:0px;
visibility:visible;z-index:3;">
Soy la capa3

</div>

<div id="capa4" Style="position:absolute; left:20px; top:100px;
visibility:visible;z-index:2;">
<Form name="miform">
<Input Type="button" Value="capa1" onmouseover="MueveCapa(capa1); DevuelveCapa(capa2); DevuelveCapa(capa3)">
<Input Type="button" Value="capa2" onmouseover="MueveCapa(capa2); DevuelveCapa(capa1); DevuelveCapa(capa3)">
<Input Type="button" Value="capa3" onmouseover="MueveCapa(capa3); DevuelveCapa(capa1); DevuelveCapa(capa2)">
</Form>

</div>

</BODY>
</HTML>

¿por qué no me sube las dos capas a la vez?
Gracias por vuestra paciencia conmigo.