Hola!
Estoy programando un menú de lo más simple, de esos que las opciones de menú estan en una tabla, y cuando haces onmouseover en esta aparece una capa, que desaparecerá cuando el mouse no esté justo encima de la capa que ha aparecido o de la celda que la hace aparecer.
El caso es que la capa desaparece aun cuando el mouse está encima de ella, pero solo cuando saco el mouse de la primera celda.
A ver si alguien puede ayudarme... Gracias!!!
Aqui os dejo el codigo:
<HTML>
<HEAD>
<SCRIPT language="javascript">
var coorX;
var coorY;
var Obj;
function actualizaCoordenada()
{
coorX=event.clientX;
coorY=event.clientY;
}
function mostrarOcultar(capa,mostrar)
{
//mostrar: 1 --> se muestra
//mostrar: 0 --> se esconde
if (mostrar==1) {document.getElementById(capa).style.visibility="v isible";}
if (mostrar==0) {document.getElementById(capa).style.visibility="h idden";}
}
function comprueba(capa)
{
if (estaEnArea(capa)==false)
mostrarOcultar(capa,0);
}
function estaEnArea(capa)
{
var altoCapa,anchoCapa,topCapa,leftCapa;
Obj = document.getElementById(capa);
altoCapa = parseInt(Obj.style.height);
anchoCapa = parseInt(Obj.style.width);
topCapa = parseInt(Obj.style.top);
leftCapa = parseInt(Obj.style.left);
if ((coorX >= leftCapa && coorX <= (leftCapa + anchoCapa)) && (coorY >= topCapa && coorY <= (topCapa + altoCapa)))
return true;
else
return false;
}
</script>
</head>
<body onmousemove="actualizaCoordenada()">
<table width="100">
<tr>
<td bgcolor="red" onmouseover="mostrarOcultar('capa1',1)" onmouseout="comprueba('capa1')">hola</td>
</tr>
</table>
<div id="capa1" style="position:absolute;top:18;width:100;left:100 ;height:100;background-color:yellow;visibility:hidden">
<table width="100%" bgcolor="orange" onMouseOut="mostrarOcultar('capa1',0)">
<tr><td bgcolor="white">Opción 1</td></tr>
<tr><td bgcolor="white">Opción 2</td></tr>
<tr><td bgcolor="white">Opción 3</td></tr>
</table>
</div>
</body>
</HTML>