Mal funcionamiento de onmouseover y onmouseout

Mikeliu · #1 (**permalink**) 13/01/2011, 16:21

Buenas. Soy nuevo en el foro y éste es mi primer tema. Supongo que me veréis más veces por aquí con dudas y problemas relacionados con páginas web. Vamos al grano...

Estoy creando una web. Y me ha aparecido un problema con JavaScript, que podría calificarlo de inesperado.

El caso es que tengo un enlace con texto cuyo contenido quiero que pase a mostrar una imagen (una bandera, siendo concretos) al pasar el ratón por encima del susodicho link. Pues bien; si realizo la inserción en el tag mediante la propiedad innerHTML, los eventos onmouseover y onmouseout no funcionan correctamente.

En Firefox y Chrome el comportamiento es similar: Moviendo el ratón por encima se produce un molesto "parpadeo". El problema radica en que, al parecer, el evento onmouseout salta justo después de mostrarse la imagen, cosa que no debería ser así.

IE (navegador que procuro tener en cuenta lo más mínimo), en la versión 8, directamente hace como que va a mostrar la imagen pero se queda en la posición inicial.

Espero me podáis ser de ayuda. Gracias por adelantado.

javiercitox · #2 (**permalink**) 13/01/2011, 16:45

un poco de código ayudaría a entender tu problema.... muestra lo que tienes

Mikeliu · #3 (**permalink**) 13/01/2011, 17:48

Cita:

Iniciado por javiercitox

un poco de código ayudaría a entender tu problema.... muestra lo que tienes

Son 2 enlaces en cuestión. Éste sería el código resumido para uno de ellos:

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

</script>
<a href="index-es.html" title="Accede a la página" onmouseover="over(this)" onmouseout="out(this)">Acceder</a>

nerisw · #4 (**permalink**) 13/01/2011, 22:07

creo que lo que pasa es que al agregar la imagen se ejecuta el metodo onmouseout por que el cursor esta ahora sobre la imagen y como la imagen esta dentro del link al mover el cursor se vuelve a ejecutar el mouseover, no se esta muy loco.

hice unas pruebas y este código funciono

Código HTML:

<a id="link" href="index-es.html" title="Accede a la p&aacute;gina" onmouseover="over()" >Acceder</a>
<script language="JavaScript" type="text/javascript">
    <!--
    function out() {
        document.getElementById('link').innerHTML = 'Acceder'
        document.getElementById('link').setAttribute('onmouseover', 'over()');
    }
    function over() {
        document.getElementById('link').innerHTML = '<img id="imagen" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Flag_of_Spain.svg/750px-Flag_of_Spain.svg.png">' ;
        document.getElementById('imagen').setAttribute('onmouseout', 'out()');
        document.getElementById('link').setAttribute('onmouseover', '');
    }
    //-->
</script>

haber si es lo que quieres o alguien te de una mejor respuesta estoy aprendiendo javascript.

Mikeliu · #5 (**permalink**) 14/01/2011, 03:42

Eso es precisamente lo que supongo que pasa con la imagen. Aunque lo lógico es que no debería ser así, ya que en ningún momento se está saliendo del enlace y la imagen no tiene determinado ningún evento (es sólo un contenido más).

El código que has insertado también lo tenía en mente, pero es que me parecía bastante absurdo tener que aplicarle eventos a la imagen.

Cuando llegue a casa lo probaré, y ya diré si funciona o no. Gracias.

Mikeliu · #6 (**permalink**) 14/01/2011, 17:43

Nada. Ese código no funciona.

nerisw · #7 (**permalink**) 15/01/2011, 11:54

que raro a mi me funciono en firefox y en chrome, a no ser que no haya entendido bien lo que quieres

haber si alguien mas te echa la mano.

marlanga · #8 (**permalink**) 15/01/2011, 12:58

Prueba con esto:

Código HTML:

<html>
<head>
	<style></style>
	<script language="JavaScript" type="text/javascript">
	function over() {
		 document.getElementById('img').style.display = "inline";
		 document.getElementById('texto').style.display = "none";
	}
	function out() {
		 document.getElementById('img').style.display = "none";
		 document.getElementById('texto').style.display = "inline";
	}
	</script>
</head>
<body>

<a href="index-es.html" title="Accede a la p&aacute;gina" onmouseover="over()" onmouseout="out()"><img id="img" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Flag_of_Spain.svg/750px-Flag_of_Spain.svg.png" style="display:none;" /><span id='texto'>Acceder</span></a>
  	Responder Citando
</body>
</html>

Si quieres que la imagen salga más pequeña, ponle width y height.

Mikeliu · #9 (**permalink**) 15/01/2011, 15:14

¡Perfecto, funciona! Muchas gracias. :)

Mikeliu · #10 (**permalink**) 16/01/2011, 10:26

Ahora me funciona perfectamente lo de los eventos (he recurrido a un setTimeout para mejorar la ocultación y hacerla más agradable) pero me ha surgido un imprevisto:

Lo que sucede es que he querido situar la imagen más centrada respecto a donde estaría mostrado el texto (el span) y, al aplicar la nueva colocación de las imágenes con CSS (mediante posición relativa), el cursor sigue mostrando la típica manecita (pointer) de los enlaces al pasar sobre la posición original de la imagen. Cosa que no tiene sentido, no debería ser así.

marlanga · #11 (**permalink**) 17/01/2011, 14:08

Posiciona el enlace, en vez de la imagen que va dentro.

Mikeliu · #12 (**permalink**) 17/01/2011, 14:18

Te me has adelantado. Ya lo había pensado hacer. xD Gracias de todas formas. :)