Mostar - Ocultar DIV - Problema con OnMouseOut.

[mitshu]

Hola a todos.

Tengo un Div en la parte izquierda de la web, y dentro de el una tabla que simula un Menú. El típico menú de la izquierda.
Al pasar por algunas celdas de esa tabla (menú), quiero que se descubra otro Div, anexo al primero, pero a su derecha para que parezca un submenú, ¿me entendéis?
Y que cuando se deje de pasar por esa celda, se oculte.

El código sería algo similar a esto:

Código:

<div id="menu">
  <table id="tabla_menu">
     <tr>
        <td></td>
     </tr>
     <tr>
        <td></td>
     </tr>
 </table>
</div>

<div id="submenu" style="position:absolute; top=x1;left=y1; visibility:hidden;">

Entonces mi problema es el siguiente:
Quiero que el DIV "submenu" se descubra cuando hago "onMouseover" sobre un TD de la tabla, y se oculte cuando salgo de él.
En principio, lo que he intentado del siguiente modo:

Código:

<td onmouseover:"mostrar();" onmouseout:"ocultar();">

Donde "mostrar" y "ocultar" son dos funciones Javascript triviales que hacen esto:

elemento.style.visibility = 'hidden' ó = 'visible'.

PROBLEMA:
Cuando salgo de la celda se desencadena el evento onMouseOut INCLUSO cuando salgo del TD hacia el DIV "submenu" que se acaba de descubrir. Entonces no puedo hacer uso de ninguna opción que aparece ahí ya que cuando me dirijo hacia ese DIV al desencadenarse el evento onMouseout se oculta.

¿Cómo puedo evitar que se oculta el DIV en esa circunstancia?

Gracias por adelantado.

[posman]

Cuando sales del TD (o sea, cuando se ejecuta onmouseout) tienes que poner un "retraso" para ocultar el DIV. Y cuando entres al DIV (submenu), si aun esta activo el retraso, lo eliminas y ya no se va a ocultar.

1. En el onmouseout del TD, crear temporizador para ocultar el submenu
2. En el evento onmouseover del submenu, desactivar el temporizador que oculta el submenu
3. En el onmouseout del submenu, ocultar el mismo submenu

Puedes utilizar la funcion setTimeout para retardar un poco el ocultar el DIV. Despues tienes que usar la funcion clearTimeout para desactivar el temporizador. Puedes ser algo como esto:

Código:

<td onmouseover="mostrar();" onmouseout="tempo=setTimeout('ocultar();',1000);">
...

Esto creara un temporizador (tempo) que ejecutara la funcion ocultar() un segundo despues que el mouse salio del TD. Ahora, en el submenu, tienes que poner:

Código:

<div id="menu" onmouseover="clearTimeout(tempo);" onmouseout="ocultar();">
...

[mitshu]

Hola.

Gracias por tu respuesta, he avanzado algo pero sigue sin funcionar.

Por el tema de la jerarquía de eventos o algo así, no funciona bien.

Dentro del TD del Menú principal:

Código:

<td onmouseover="mostrar();" onmouseout="tempo=setTimeout('ocultar();',2000);"><a href="#">&bull; LINK</a></td>
.

como ves hay un Link.

Y dentro del DIV del SubMenú, hay otra TABLE con sus TDs.

No sé por que será, pero el DIV se oculta todo el rato la mayoría de las veces, incluso cuando estoy en el TD del código que he puesto (el del menú principal) si dentro de él, paso por encima del Link (<a></a>) también se oculta.

No sé practicamente nada acerca de controlar los eventos. ¿es problema de esto, o qué solución puede haber?

[Dalvenjha]

Lo que buscas es ocultar y mostrar un div cuando se haga onmouseover en tu div no?, ya he puesto algunos códigos sobre eso aqui, asi que voy a buscarlos, voy a tratar de responderte nuevamente al toque ok?

Saludos!!

[Dalvenjha]

Listo, encontré lo que postee (Qué flojo soy para reescribir) a ver vamos por partes, te propongo que replantees tu script que muestra o esconde los divs, podrías usar este, y te ahorraría ese problema.

Código:

<script type="text/javascript">
objeto = 'uno';
function enseñar(enseñame){
document.getElementById(objeto).style.display="none";
document.getElementById(enseñame).style.display="block";
objeto=enseñame;
}
</script>
Y la llamada sería:
<li onmouseover="enseñar('uno');">ver uno</li>
<li onmouseover="enseñar('dos');">ver dos</li>
<li onmouseover="enseñar('tres');">ver tres</li>
<li onmouseover="enseñar('cuatro');">ver cuatro</li>

Asi lo que hace, es capturar el div que está con el display block, y cambiarlo a none, y luego poner en block el que estás llamando. El efecto es un tanto abrupto, pero si quieres algo como un fade, podría darte una mano también, pero primero revisa esto y luego me pasas la voz para que lo adaptemos a tu estructura.

Cualquier pregunta hasla por aqui.

Saludos!!

[mitshu]

Hola de nuevo.

Gracias Dalvenjha por tu sugerencia.

Contamplo tu idea, y me preparo para cambiar el "chip" si no resuelvo finalmente mi planteamiento, pero es que, antes de reestructurar el menú, me gustaría dar con la solución a esto ya que, no puede ser nada ultracomplejo, ya que tengo el Div del submenú colocado y todo, y se oculta y desoculta pero no cuando quiero :(

Mira, os paso un enlace donde colgaré la página para que la echéis un ojo y veais el comportamiento del submenú, ¿ok? y así de paso, podáis acceder de primera mano al código para echarle un ojo, quien quiera.

http://80.37.222.172:8080/Remo/index.html

Y aquí el .js:
http://80.37.222.172:8080/Remo/scripts/menu.js

Observar el comportamiento del SubMenú de marras (que es el que aparece al pasar por encima de NACIMIENTO).
Observar también, que el Submenú que se despliega (FUNDADORES y 1ª REGATA) es una tabla contenida en un DIV. Pues bien, al pasar del primer TD (FUNDADORES) al segundo TD (1ª REGATA) (que están ambos contenidos en el mismo DIV) el Submenú se oculta. Interpreta el onMouseout del DIV, pero ¡¡SIN SALIR DE ÉL!!

Espero que por favor, me podáis ayudar, no puede ser tan complicado algo tam común en el WEB! Y me fastidia no dar con ello.

GRACIAS!!

[mitshu]

¡¡SOLUCIONADO!!

Después de horas y horas investigando, ¡¡¡el menú ya tiene la funcionalidad deseada!!!

He empleado el concepto que me dió posman, el del retardo. Sólo que, en vez de crear la variable "tempo" en la propia llamada a la función, la creo de forma global en la hoja de código .js.

Además, he creado otra función, "oculta_retarda". Esta nueva función llama a la función "oculta()" (la normal) pasados los milisegundos que ponga en el setTimeout y a "oculta_retarda" la llamo sólo cuando salgo del TD.
Cuando salgo del DIV (submenu) llamo sencillamente a "oculta()" ya que no quiero que se vea más.

Este es el código resultante del TD del menú principal:

Código:

<td onmouseover="mostrar_nacimiento();" onmouseout="ocultar_retarda();"><a href="#">&bull; NACIMIENTO</a></td>

Este es el código del DIV del SubMenú:

Código:

<div id="apDiv1" onmouseover="mostrar_nacimiento();" onmouseout="ocultar_nacimiento();">

Y este, el código JavaScript asociado:

Código:

	var tempo=0;
	
	function mostrar_nacimiento()
		{
		var subMenu = document.getElementById('apDiv1');
		subMenu.style.visibility = 'visible';
		clearTimeout(tempo);
		}

	function ocultar_nacimiento()
		{
		var subMenu = document.getElementById('apDiv1');
		subMenu.style.visibility = 'hidden';
		}
		
	function ocultar_retarda()
		{
		tempo=setTimeout("ocultar_nacimiento();",1);		
		}

¡GRACIAS A TODOS! en especial a Dalvenjha y posman.

[Safren]

Tengo un mapa de imagen dónde tengo varias zonas que al pasar por encima se despliega un submenu. He implementado el código de mitshu y funciona de maravilla, lo único es que no sé como modificar el código para que me sirva para todos los submenus, Tal como esta solo me sirve para un div concreto.

¿Que debo poner para que coja la id de la capa a mostrar/ocultar automaticamente?

[alexg88]

No deberías reabrir temas que son de hace tanto tiempo, sino abrir otro tema.

Aun así, te paso como podrías hacerlo:

Código Javascript:

function hideElement(element)
{       
        element.style.visibility = 'hidden';
}
 
function showMenu(selectedElementId,showElementId)
{
    var tempo=0;
    
    var selectedElement = document.getElementById(selectedElementId);
    var showElement = document.getElementById(showElementId);
    
    if (selectedElement && showElement)
    {
        selectedElement.onmouseover = showElement.onmouseover = function()
        {
            showElement.style.visibility = 'visible';
            clearTimeout(tempo);
        }
        
        selectedElement.onmouseout =  showElement.onmouseout = function()
        {
            tempo = setTimeout(function() { hideElement(showElement); },100);       
        }    
    }    
}
 
//El primer parámetro es el id del elemento que hace aparecer el elemento cuyo id es el segundo parámetro
showMenu("menu","submenu");
 

Un saludo.