Sobre la ocultación de capas [pequeña duda]

xenon87 · #1 (**permalink**) 02/09/2008, 01:02

Hola foreros.
Os explico el problema,

Estoy haciendo una lista de reproducción para seleccionar la música a sonar en la página (cosa que no tiene que ver con javascript, porque es flash).

Entonces al pasar el mouse por una imagen, despliega una capa que tiene la lista de canciones (con etiquetas <li> y un onclick cada etiqueta para que la música suene con ajax y flash)

Entonces, el usuario se supone que puede elegir canción o pasar de ello, por lo que le he puesto el evento onMouseOut al Div para que tras salir se me oculte la capa. La verdad esque me funciona, el problema esque cuando paso el mouse por encima de un <li>, se me cierra automaticamente la capa.

He probado de quitarle los <a> y el onclick a los <li> que hay en el div y no hay ningún problema. Que puede ser?

Gracias ^^

Panino5001 · #2 (**permalink**) 02/09/2008, 01:18

Habría que ver el código. Probablemente tenga que ver con la propagación del evento, pero sin ver el código es difícil aportar una solución.

xenon87 · #3 (**permalink**) 02/09/2008, 01:57

Sería algo así. (esque estoy en el pc del trabajo, mis cosas están en el portátil)

<img src="icono_expandir.gif" onmouseOver="abre_la_lista_de_reproduccion()">
<div id="lista_de_reproduccion" onmouseOut="oculta_la_lista_de_reproduccion()">
<li onclick="cambio_la_musica(1)">Throught the fires and flames - Dragon Force</li>
<li onclick="cambio_la_musica(1)">Hyper Ballard- Bjork</li>
<li onclick="cambio_la_musica(1)">Give ir all - Rise Against</li>
.... (más)
</div>

--------- codigo javascript ----------

abre_la_lista_de_reproduccion(){
var obj = document.getElementById('lista_de_reproduccion');
obj.style.display="block";
}

oculta_la_lista_de_reproduccion(){
var obj = document.getElementById('lista_de_reproduccion');
obj.style.display="none";
}

-------- css -------

En el css solo tengo definido unos márgenes,el display:none, color de fondo, y el tamaño del div.

Panino5001 · #4 (**permalink**) 02/09/2008, 02:27

Probá así:

Código PHP:

  <html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Sin título-1</title>

<script>

function stopEvent(e) {

    if (!e) e = window.event;

    if (e.stopPropagation) {

        e.stopPropagation();

    } else {

        e.cancelBubble = true;

    }

}

var addEvent = function() {

  if (window.addEventListener) {

    return function(el, type, fn) {

      el.addEventListener(type, fn, false);

    };

  } else if (window.attachEvent) {

    return function(el, type, fn) {

      var f = function() {

        fn.call(el, window.event);

      };

      el.attachEvent('on' + type, f);

    };

  }

}();

function abre_la_lista_de_reproduccion(e){

var obj = document.getElementById('lista_de_reproduccion');

obj.style.display="block";

}

 
function oculta_la_lista_de_reproduccion(e){

this.style.display="none";

stopEvent(e);

}

function cambio_la_musica(algo){alert(algo)}

window.onload=function(){

    addEvent(document.getElementById('lista_de_reproduccion'),'mouseout',oculta_la_lista_de_reproduccion);

    addEvent(document.getElementById('lista_de_reproduccion'),'mouseover',abre_la_lista_de_reproduccion);

 
}

</script>

</head>

<body>

<img src="1.jpg" width="50" onmouseover="abre_la_lista_de_reproduccion(event)">

<div style="display:none" id="lista_de_reproduccion">

<li onclick="cambio_la_musica(1)">Throught the fires and flames - Dragon Force</li>

<li onclick="cambio_la_musica(1)">Hyper Ballard- Bjork</li>

<li onclick="cambio_la_musica(1)">Give ir all - Rise Against</li>

</div>

</body>

</html>

xenon87 · #5 (**permalink**) 02/09/2008, 02:49

Te lo agradezo panino, pero no me interesa el meterle tanto código extra para que funcione. Solo quiero saber el por qué no me funciona.
Tal y como digo, lo curioso esque poniendo texto a pelo funciona perfectamente (es decir, entro en la capa con el mouse, y al salir de ella se cierra)

Con <li onclick="blabla()"> al entrar en la capa se me cierra automaticamente tras pasar el mouse sobre estos elementos. Es decir, solo cuando paso el mouse por los <li> se cierra. Lo comprobé poniendo un margin-top:'10px', en esos 10 pixeles podia moverme perfectamente sin que pasara nada y al salir del div se cerraba correctamente el div.

Alguna sugerencia?

Panino5001 · #6 (**permalink**) 02/09/2008, 03:48

Con menos código sería así:

Código:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sin título-1</title>
<script>
function abre_la_lista_de_reproduccion(e){
var obj = document.getElementById('lista_de_reproduccion');
obj.style.display="block";
}

function oculta_la_lista_de_reproduccion(e){
var obj = document.getElementById('lista_de_reproduccion');
obj.style.display="none";
}
function cambio_la_musica(algo){alert(algo)}

</script>
</head>
<body>
<img src="1.jpg" width="50" onmouseover="abre_la_lista_de_reproduccion(event)">
<div style="display:none" id="lista_de_reproduccion" onmouseover="abre_la_lista_de_reproduccion(event)" onmouseout="oculta_la_lista_de_reproduccion(event)">
<li onClick="cambio_la_musica(1)">Throught the fires and flames - Dragon Force</li>
<li onClick="cambio_la_musica(1)">Hyper Ballard- Bjork</li>
<li onClick="cambio_la_musica(1)">Give ir all - Rise Against</li>
</div>
</body>
</html>

Para saber por qué pasa, leete esto: http://kusor.net/traducciones/brainj...vents1.es.html

xenon87 · #7 (**permalink**) 02/09/2008, 08:06

Muchas gracias panino5001 ^^
Funciona genial, y ya me he leido ese artículo.

De nuevo, gracias por las molestias.

Panino5001 · #8 (**permalink**) 02/09/2008, 09:12

Me alegra mucho que hayas leído el artículo

.