Ocultar layer con onmouseout

larariro · #1 (**permalink**) 12/11/2005, 05:29

¡Hola a todos!

Estoy intentando hacer que un pequeño menú aparezca al pasar sobre un link y que desaparezca al pulsar sobre un opción o al salir del propio menú. He conseguido que el menú aparezca, pero le digo que desaparezca al salir de él con onmouseout del div que contiene el menú y se oculta en cuanto salgo de la primera línea del menú. He visto en el foro que hay otra persona con el mismo problema que yo, pero nadie le ha respondido (http://www.forosdelweb.com/showthrea...mouseout+layer)

Aquí tenéis el código lo más reducico que he podido:

Código PHP:

  <html>

<head>

<style type="text/css">

.capa {

    background-color: #FDDBD7;

    border-style: solid;

    border-width: 1px;

    position: absolute;

    visibility: hidden;

}

</style>    

 
<script language="JavaScript" type="text/javascript">

<!--

function muestra(idCapa, evento) {

    var capa;

    // Recuperamos el objeto capa dependiendo del navegador

    if (document.layers) capa = eval("document." + idCapa);

    if (document.all) capa = eval(idCapa);

    if (document.getElementById) capa = eval('document.getElementById("' + idCapa + '")');

    // Calculamos las coordenadas en las que va a aparecer y se las asignamos

    var x = (document.all)? evento.x + document.body.scrollLeft : evento.pageX;

    var y = (document.all)? evento.y + document.body.scrollTop : evento.pageY;    

    capa.style.left = x - 5;

    capa.style.top  = y - 5;

    // Creamos el contenido del menu

    var cont = "<table class='menu'><tr class='cabecera'><td>ACCION</td></tr>";

    cont += "<tr><td><a href='http://www.google.com'>google</a></td></tr>";

    cont += "<tr><td><a href='http://www.yahoo.com'>yahoo</a></td></tr>";

    cont += "</table>";

    capa.innerHTML = cont;

    // Mostramos la capa

    capa.style.visibility = (document.layers) ? "show" : "visible";

}

 
function oculta(capa) {

    capa.style.visibility = (document.layers) ? "hide" : "hidden";

}

// -->

</script>

 
</head>

<body>

    <div id="contenedor" class="capa" onmouseout="oculta(this)"></div>

    <a href="#" onmouseover="muestra('contenedor', event)">menu</a>

</body>

</html>

Muchas gracias

larariro · #2 (**permalink**) 16/11/2005, 04:04

Hola otra vez.

He seguido investigando en el problema y he encontrado una posible explicación a ese comportamiento y una solución al problema (usando CSS)

La explicación:

Según encontré aquí (http://www.codecomments.com/message1882180.htm), esto es debido a que javascript se lía con los eventos onmouseout del div y de los elementos hijo que contenga y nos da como mouseout el de cualquiera de los elementos en vez de sólo el del div. Para solucionar esto, los de microsoft se han sacado de la manga un nuevo evento: onmouseleave. Si lo usamos en el ejemplo de antes en vez de onmouseout, funcionará a la perfección.... sólo en el expolrer. Eso sí, en el link que pongo arriba, dicen que el lío del onmouseout es sólo del explorer y yo tengo más que comprobado (no uso el explorer) que también ocurre con el firefox. Una cosa que no me convence de esta explicación es que, en lugar de meter una tabla en el div, puse únicamente un texto en dos líneas separadas por un <br>. Se supone que ahí no hay varios elementos. Sólo está el div. Pues me seguía desapareciendo el div en cuanto salía de la primera línea.

Conclusión: la explicación de que a javascript le valga el primer onmouseout que pille parece lógica pero no la he conseguido demostrar.

Como esto me está quedando largo, pondré la solución en otra respuesta.

larariro · #3 (**permalink**) 16/11/2005, 04:20

La solución (una de ellas, claro

):

La he sacado de esta página (http://www.hedgerwow.com/360/dhtml/u..._menu/demo.php) y la he adaptado (y reducido) a mis necesidades. Os envío hasta los comentarios que he necesitado para aclarame con el código por si a alguien le pueden ayudar:

Código PHP:

  <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">

<html>

<head>

<meta http-equiv=content-type content="text/html; charset=utf-8">

<title> CSS Dropdown Menu </title>

<style>

body {

    font-family: verdana, arial, "sans serif";

    font-size: 13px;

}

/* Esto quita las bolitas de los elementos ul y li y los pega a la izquierda */

.dropdownmenu ul {

    padding: 0;

    margin: 0;

    list-style: none;

}

.dropdownmenu li {

/* Esto hace que las opciones salgan en su sitio */

    position: relative;

/* Ancho y alto del botón. 0 vertical para que no nos separe las líneas y un poco de anchura para que 

   no haga falta estar fino con el ratón */

    padding: 0em 0.5em;  

}

.dropdownmenu li li {

/* Esto es para que la opción ocupe todo el ancho, si no, cogeríamos el 0.5 de arriba y dejaría un espacio en blanco muy feo */

    padding: 0;

}

/* Estilo de las opciones de menú (los links) */

.dropdownmenu li li a {

/* Esto hace que las opciones no se solapen */    

    display: block;

    padding: 2px 4px; 

    text-decoration: none;

    color: #444444; 

    border-top: 1px solid #444444;    

}

/* Estilo cuando pasamos el ratón sobre las opciones (links)*/

.dropdownmenu li li a:hover {

    background: #E49993;

}

/* Sin esto no hay desplegable */

.dropdownmenu li:hover>ul {

/* Ancho de las opciones */

    width: 4.5em;

/* Esto muestra las opciones del menu. El important hace que prevalezca sobre otro display que pueda afectar a ese elemento */

    display: block !important;

/* Hacemos que las opciones del menu salgan en primer plano */

    z-index: 100;

}

/* Estilo de las opciones del menú */

.dropdownmenu li ul { 

    position: absolute;

    left: 0px;

    border: 1px solid #444444; 

    background: white;

/* Display none oculta las opciones del menú */    

    display: none;

    padding: 0px;

}

/* Excepcion para que no salga la línea superior en la 1a opcion */

.linea {

     border-top-width: 0px !important;

}

 
</style>

</head>

<body>

 
<h1>CSS Dropdown Menu</h1>

 
 
<table>

    <tr>

        <td>

            Frederico

        </td>

        <td>

            <div class="dropdownmenu">

                <ul>

                    <li>

                        v

                        <ul>    

                            <li><a class="linea" href="http://www.yahoo.com">Editar</a></li>

                            <li><a href="http://www.google.com">Borrar</a></li>

                        </ul>

                    </li>

                </ul>

            </div>

        </td>

    </tr>

    <tr>

        <td>

            Manoli

        </td>

        <td>

            <div class="dropdownmenu">

                <ul>

                    <li>

                        v

                        <ul>    

                            <li><a class="linea" href="http://www.yahoo.com">Editar</a></li>

                            <li><a href="http://www.google.com">Borrar</a></li>

                        </ul>

                    </li>

                </ul>

            </div>

        </td>

    </tr>

</table>

</body>

</html>

La idea de esto es tener unos elementos ocultos que sólo se muestren al pasar el ratón sobre las v (yo tenía una imagen, pero he puesto uves para que funciones con sólo copiar y pegar). La línea que contiene el meollo no la llego a entender del todo (.dropdownmenu li:hover>ul) pero eso lo preguntaré en el foro de CSS

Espero que esto le sirva de ayuda a alguien. Personalmete, he buscado en el google y me he encontrado exactamente el mismo problema varias veces y ninguna respuesta (excepto la de onmouseleave).

¡Mierda! Acabo de probar mi ejemplo en el explorer y no funciona

Menos mal que el original (el link está arriba) sí funciona, así que, tendré que ponerme otra vez con él hasta que encuentre en qué falla. Estoy harto de las incompatibilidades entre navegadores :-p

En fin, habrá que seguir currándoselo. ¡Un saludo a todos!