Problemas eventos capas

juanca2626 · #1 (**permalink**) 18/02/2007, 18:36

Hola a todos.
Tengo un problema con los eventos en javascript

tengun una extructuras de capas de las siguiente manera.

<div style=" border: 1px solid black;width:160px; height:150px; " onMouseOver="alert('Adentro')"; onMouseOut="alert('Afuera')" >
<div style=" border: 1px solid black;width:160px; height:100px; ">
<div style=" border: 1px solid black;width:160px; height:50px; ">

</div>
</div>
</div>

bueno solo coloco el evento en la primera capa porque es la que quiero qu ese ejecute.
Pero tengo un problema en onMouseOver y onMouseOut que se supone que se debe de ejecutar cuando entre o salga de la capa
Pero este se ejecuta ahi mismo no puedo saltar una capa porque ya salio y se ejecuto onMouseOut . y yo quiero pues se ejecute este evento onMouseOut pues cuado verdaderamente salga de la capa . se supone que cada capa esta dentro de uno tras otra y la que la contiene pues es la primera.

No se que puedo hacer ,alguien me puede ayudar

caricatos · #2 (**permalink**) 19/02/2007, 00:48

Hola:

Cuando hay una alerta, no se ejecuta ningún evento hasta que se acepte, y si el cursor salió de la capa ya no se ejecuta el otro evento.

Si en vez de hacer esa alerta, haces algo que no detenga los eventos, seguro que funciona (bueno tampoco serviría ocultar la capa o cambiarla de sitio o meterle algo encima

)

En vez de una alerta, prueba mostrar algo o cambiar algún estilo de la capa como el borde...
onmouseover="this.style.borderStyle = 'inset'" onmouseout="this.style.borderStyle = 'outset'"

Saludos

juanca2626 · #3 (**permalink**) 19/02/2007, 08:38

Bien mira pues eso en realidad ago , no uso alert, esa extructura las puse solo de ejemplo para que vean que es lo que pasa con los eventos.

y pues lo que quiero hacer es que cuando pasen el mouse por la primera capa
pues en la segundo me habra un menu. creo que no habria problemas si ese menu fuece estatico, no con efecto de que se habre . porque cuando paso por sus enlaces del menu pues , lo que hace es que lo cierra y lo vuelve habrir

y pues se nota . por los efectos..

Solo me falta esta parte que no se como solucionar porque hay un enredo con todo eso d elos eventos, yo supongo que el evento onMouseOver debe ejecutarce cuando salgo de la primera capa que las contienen, no cuando paso el mouse por la segunda ni por la tercera capa ya que ellas estan dentro de la primera .

juanca2626 · #4 (**permalink**) 19/02/2007, 09:41

Hola de nuevo aqui les dejare el codigo de lo que trato de hacer.
La idea es que solo se habra el menu, del efecto solo una vez y se cierre cuando salga de todo . no por los links.
Gracias de antemano a todas las personas que me ayuden. y alos que no igual modo

Codigo
--------------------------------------------------------------------------
<html>
<HEAD>
<script language="JavaScript">
var ancho3=0;
function big(lyr,fila) {

document.all.Layer3alto.style.overflow='visible';
document.all[lyr].style.height='180px';
document.all[fila].style.background= 'red';
document.all.Layer3.style.height='180px';
document.all.Layer3_3.style.height='180px';
setTimeout("efecto()",1);
}
function small(lyr,fila) {
document.all[lyr].style.height='18px';
document.all[fila].style.background= "#FFFFCC";
document.all.Layer3alto.style.overflow='hidden';
document.all.Layer3.style.height='0px';
document.all.Layer3_3.style.height='0px';
document.all.Layer3.style.width='0px';
document.all.Layer3_3.style.width='0px';

}
function efecto() {

document.all.Layer3.style.width=ancho3 + "px";
if(document.all.Layer3.style.width == "160px"){
ancho3=0;
document.all.Layer3.style.background="#FFFFCC";
document.all.Layer3_3.style.width="160px";
}else{
ancho3 = ancho3 + 10 ;
setTimeout("efecto()",1);
}
}
</script>
</HEAD>
<BODY>
<div id="Layer3alto" align="center" z-index:3; style=" height:18px; position:absolute; width:160px; height:10px; left: 398px; top: 15px; " onMouseOver="big('Layer3alto','fila3')" onMouseOut="small('Layer3alto','fila3')" >
<div align="center" style=" width:160px; height:10px; " > <a href="menu2.html" >Menu 3</a></div>
<div align="center" id="Layer3" style="border: 1px solid black; width:0px; height:10px; overflow: hidden " >
<div align="center" id="Layer3_3" style="overflow: hidden ;width:0px; height:10px; ">
<font face="Verdana, Arial, Helvetica, sans-serif">
<table width="100%" align="center" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td id="fila3" b><a href="menu1.html" >Menu 1</a></td>
</tr>
<tr>
<td><a href="link1.html">Link 1</a></td>
</tr>
<tr>
<td><a href="link1.html">Link 2</a></td>
</tr>
<tr>
<td><a href="link1.html">Link 3</a></td>
</tr>
<tr>
<td><a href="link1.html">Link 4</a></td>
</tr>
<tr>
<td><a href="link1.html">Link 5</a></td>
</tr>
</table>
</font>
</div>
</div>
</div>