Ver Mensaje Individual
  #1 (permalink)  
Antiguo 06/09/2007, 21:47
Avatar de derkenuke
derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 21 años, 4 meses
Puntos: 45
Misma funcion para mouseover y mouseout ¿Cómo distinguirlos?

Hola.

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(elemeventofunc) {
    if (
elem.addEventListener)  // W3C DOM
        
elem.addEventListener(evento,func,false);
    else if (
elem.attachEvent) { // IE DOM
        
var elem.attachEvent("on"+eventofunc);
        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;
}

listenwindow"load", function() {
    
btnNaranja = $("botonNaranja");
    
btnAzul = $("botonAzul");
    
btnVerde = $("botonVerde");

    
listenbtnNaranja"mouseover"setInfo);
    
listenbtnNaranja"mouseout"setInfo);
    
listenbtnAzul"mouseover"setInfo);
    
listenbtnAzul"mouseout"setInfo);
    
listenbtnVerde"mouseover"setInfo);
    
listenbtnVerde"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.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.