Ocultar capa pasado un tiempo

[AbdelioR]

Estoy haciendo un menú desplegable y quiero que el menú inferior no se oculte hasta pasado "x" tiempo desde que se saca el cursor del menu superior.

Lo tengo hecho así:

Javascript:

Código HTML:

<script type="text/javascript">
  function oculta (kpa) {
   var capa = document.getElementById(kpa);
   setTimeout('capa.style.visibility="hidden"',2000);
}
function muestra (kpa) {
   document.getElementById(kpa).style.visibility="visible";
}
</script> 

Diseño de menu's

Código HTML:

<div id="menu1">
  <table width="800" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCC99">
    <tr>
      <td align="center">INICIO</td>
      <td align="center" onmouseover="muestra('menu2')" onmouseout="oculta('menu2')">CATEGORIAS</td>
      <td align="center">MIS THEMES </td>
      <td align="center">ENVIAR THEME </td>
      <td align="center">BUSQUEDA</td>
      <td align="center">FORO</td>
      <td height="30" align="center">CONTACTO</td>
    </tr>
  </table>
</div>
<div id="menu2" style="visibility:hidden">
<table width="800" border="0" cellpadding="0" cellspacing="0" bgcolor="#CC9966">
  <tr>
    <td align="center">SUB 1 </td>
    <td align="center">SUB2</td>
  </tr>
</table>
</div> 

El funcionamiento seria que al situarte en categorias mostrara el submenú (cosa que hace bien) y que al salir de él, el submenú tardara un tiempo en ocultarse. En lugar de eso, pasa el tiempo y el IE da el mensajito de error en la esquina inferior izquierda.

Si alguien ve donde puedo estar comentiendo el error será de agradecer

Gracias.

[Bellenger]

Prueba esto...

Código HTML:

<script type="text/javascript">
  function oculta (kpa) {
   var capa = document.getElementById(kpa);
   setTimeout("capa.style.display='none'",2000);
}
function muestra (kpa) {
   document.getElementById(kpa).style.display="block";
}
</script> 

Espero te funcione...

[AbdelioR]

Nop, con este código ni tan solo se muestra al pasar por encima :/

[JavierB]

Hola AbdelioR

Pon así el menú:

Código:

<td align="center" onmouseover="muestra('menu2')" onmouseout='setTimeout("oculta(\"menu2\")",2000)'>CATEGORIAS</td>

y la función:

Código:

  function oculta (kpa) {
   document.getElementById(kpa).style.visibility='hidden';
}

Saludos,

[AbdelioR]

Ahí si, funciona perfectamente. Gracias JavierB :)

Me he estado peleando un poco más con el asunto pero sigo sin conseguir el efecto deseado...

La idea es que al salir de categorias el submenú desaparezca, pero que si yo paso de categorias a situarme encima del submenú, este se quede y no se vaya.

Lo hago así:

Código HTML:

<script type="text/javascript">
   function oculta (kpa) {
   document.getElementById(kpa).style.visibility='hidden';
}
function muestra (kpa) {
  	document.getElementById(kpa).style.visibility='visible';
}
function muestra2 (kpa) {
  	if (document.getElementById(kpa).style.visibility=='visible') document.getElementById(kpa).style.visibility='visible';
}
</script> 

Código HTML:

<div id="menu1">
  <table width="800" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCC99">
    <tr>
      <td align="center">INICIO</td>
      <td align="center" onmouseover="muestra('menu2')" onmouseout='setTimeout("oculta(\"menu2\")",2000)'>CATEGORIAS</td>
      <td align="center">MIS THEMES </td>
      <td align="center">ENVIAR THEME </td>
      <td align="center">BUSQUEDA</td>
      <td align="center">FORO</td>
      <td height="30" align="center">CONTACTO</td>
    </tr>
  </table>
</div>
<div id="menu2" style="visibility:hidden" onmouseover="muestra2('menu2')">
<table width="800" border="0" cellpadding="0" cellspacing="0" bgcolor="#CC9966">
  <tr>
    <td align="center">SUB 1 </td>
    <td align="center">SUB2</td>
  </tr>
</table>
</div> 

El cambio en el diseño seria la llamada a "muestra2" al situarte encima de la division del submenú, pero pasan 2 segundos y se oculta igual :/

EDIT: Bellenger lo he probado y no va :S
||
V

[Bellenger]

Claro que funciona, solo tenias que adapatarlo con el retardo de tiempo, en fin...

[AbdelioR]

Nadie me puede hechar un cable? :p

[Rafael-FM]

Mas Abajo les dejo un codigo que funciona pero sin el "settimeout"

[Rafael-FM]

Código:

<html>
<head>
<title>MOSTRAR OCULTAR CAPAS CON EL MOUSE</title>
<script type="text/javascript">
function muestra (abc) {
document.getElementById(abc).style.visibility="visible";}
function oculta (abc){
document.getElementById(abc).style.visibility='hidden';}
</script>
</head>
<body>
<div id="menu1">
<table width="800" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCC99">
  <tr>
<td align="center">INICIO</td>
<td align="center" onmouseover="muestra('menu2')" onmouseout="oculta('menu')">CATEGORIAS</td>
<td align="center">MIS THEMES 
  </td>
<td align="center">ENVIAR THEME </td>
<td align="center">BUSQUEDA</td>
<td align="center">FORO</td>
<td height="30" align="center">CONTACTO</td>
</tr>
</table>
</div>
<div id="menu2" style="visibility:hidden; width: 801px;">
<table width="800" border="0" cellpadding="0" cellspacing="0" bgcolor="#CC9966">
<tr>
<td align="center" onmouseover="muestra('menu2')" onmouseout="oculta('menu2')">SUB1<a href="http://www.www.www">SUB2</a> </td>
<td align="center" onmouseover="muestra('menu2')" onmouseout="oculta('menu2')">SUB2<a href="http://www.www.www">SUB2</a> </td>
</tr>
</table>
</div>
</body>
</html>