Estoy trabajando con manejadores para los eventos mouseover y mouseout para capas DIV, y quería utilizar una sola función para manejar los dos eventos. Entonces el problema está en cómo diferenciar el mouseover del onmouseout, y yo creo que la solución está en analizar hacia qué elemento se desplaza el ratón en cada movimiento (así sabre si entra o sale).
Tengo tres capas DIV. Cuando hago mouseover sobre cualquiera, se muestra una frase en una cuarta capa DIV de información. Cuando hago mouseout quiero que la capa de información muestre la frase "_".
Bueno, en IE lo he conseguido (obtengo el window.event.toElement para saber a qué elemento me dirijo, y si me dirijo a una capa lo sé, y si me dirijo fuera -al body por ejemplo- también lo sabré). En firefox no sé muy bien cómo saber a dónde voy ni de dónde vengo. No consigo utilizar bien evt.target, evt.currentTarget y evt.relatedTarget para hacer lo que quiero.
Dejo el código para ver quién puede instruirme:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>Página nueva</title>
<style type="text/css">
</style>
</head>
<body>
<div id="botonNaranja">NARANJA</div><br/>
<div id="botonAzul">AZUL</div><br/>
<div id="botonVerde">VERDE</div><br/>
<div id="info">_</div>
<script type="text/javascript">
<!--
// document.getElementById abreviado
function $(x) { return document.getElementById(x); }
function listen(elem, evento, func) {
if (elem.addEventListener) // W3C DOM
elem.addEventListener(evento,func,false);
else if (elem.attachEvent) { // IE DOM
var r = elem.attachEvent("on"+evento, func);
return r;
}
else throw "No es posible añadir evento";
}
function setInfo(evt) {
var adonde = window.event ? window.event.toElement : evt.target;
var miId = adonde.getAttribute("id");
//alert( evt.currentTarget == evt.relatedTarget );
//alert( "current: "+evt.currentTarget.tagName +", related: "+evt.relatedTarget.tagName +", "+miId);
if( miId=="botonNaranja" ) {
var str = "naranja";
}
else if( miId=="botonAzul" ) {
var str = "azul";
}
else if( miId=="botonVerde" ) {
var str = "verde";
}
else {
var str = "_";
}
$("info").innerHTML = str;
}
listen( window, "load", function() {
btnNaranja = $("botonNaranja");
btnAzul = $("botonAzul");
btnVerde = $("botonVerde");
listen( btnNaranja, "mouseover", setInfo);
listen( btnNaranja, "mouseout", setInfo);
listen( btnAzul, "mouseover", setInfo);
listen( btnAzul, "mouseout", setInfo);
listen( btnVerde, "mouseover", setInfo);
listen( btnVerde, "mouseout", setInfo);
} );
// -->
</script>
</body>
</html>
PD: Y no, no quiero usar dos funciones para los dos eventos, perdería la gracia y mi pregunta no tendría sentido.
Un saludo.
