Modificar evento onMouseOut

[Pastilla666]

Hola a todos, ya llevo tiempo con este problema de intentar cambiar los parametros que tiene el onMouseOut de un Tag con javascript pero no lo consigo con el Explorer.

De echo, estube discutiendo en un foro sobre este tema en esta misma web, deje el trabajo que estaba haciendo y ahora, al retomarlo de nuevo y de darle muchas vueltas, me he dado cuenta de que sigue sin funcionar, ahora tengo simplifado el codigo, os lo dejo aki para que veais.


Aqui os dejo el Javascript:

function imagenMenuClick (nomCapa, nomObj, ruta)
{
//Variable para saber si se usa explorer o mozilla
var gko = navigator.userAgent.toLowerCase();

//Aqui pregunto si le hemos dado ya a algun elemento del menu, sino, no entra
if ((nomObjAnt != 0) && (nomObjAnt != nomObj))
{
var objAnt = document.getElementById(nomObjAnt);
var objCapaAnt = document.getElementById(nomCapaAnt);

if (gko.indexOf('gecko')!=-1) //si soporta gecko, es Mozilla, Netscape, Safari, etc
{
objAnt.src = "img/fondoTextoMenu.jpg";
objCapaAnt.setAttribute("onmouseout","javascript: imagenMenuOut ('"+nomObjAnt+"', 'img/fondoTextoMenu.jpg')");
}
else //es I.Explorer
{
objAnt.src = "img/fondoTextoMenu.jpg";
objCapaAnt.setAttribute("onmouseout","javascript: imagenMenuOut ('"+nomObjAnt+"', 'img/fondoTextoMenu.jpg')");
}
}

Obj = document.getElementById(nomObj);
ObjCapa = document.getElementById(nomCapa);

//Aqui lo que se hace es para dejar la "Imagen Resaltada" del elemento del menu que pinchamos

if (gko.indexOf('gecko')!=-1) //si soporta gecko, es Mozilla, Netscape, Safari, etc
{
Obj.src = "img/fondoTextoMenuOver.jpg";
ObjCapa.setAttribute("onmouseout","javascript: imagenMenuOut ('"+nomObj+"', 'img/fondoTextoMenuOver.jpg')");
}
else //es I.Explroer
{
alert (nomObj);
alert (nomCapa);
Obj.src = "img/fondoTextoMenu.jpg";
ObjCapa.setAttribute("onmouseout","javascript: imagenMenuOut ('"+nomObj+"', 'img/fondoTextoMenuOver.jpg')");
}

//Aqui guardo los nombres del menu al que pinchamos ahora para que me las cambie la proxima vez que se pinche en otra opcion, esta.
nomObjAnt = nomObj;
nomCapaAnt = nomCapa;
}

Aqui os pongo el HTML:

<div id="capaInicio" class="opcionMenu" onMouseOver="javascript: imagenMenuOver('inicio', 'img/fondoTextoMenuOver.jpg');" onMouseOut="javascript: imagenMenuOut('inicio', 'img/fondoTextoMenu.jpg');" onClick="javascript: imagenMenuClick('capaInicio', 'inicio', 'img/fondoTextoMenuOver.jpg');">
<img id="inicio" src="img/fondoTextoMenu.jpg" alt="Menu">
<div class="textoMenu"><font color="#fc7c05">I</font>nicio</div>
</div>
<div id="capaOfertas" class="opcionMenu" onMouseOver="javascript: imagenMenuOver('ofertas', 'img/fondoTextoMenuOver.jpg');" onMouseOut="javascript: imagenMenuOut('ofertas', 'img/fondoTextoMenu.jpg');" onClick="javascript: imagenMenuClick('capaOfertas', 'ofertas', 'img/fondoTextoMenuOver.jpg');">
<img id="ofertas" src="img/fondoTextoMenu.jpg" alt="Menu">
<div class="textoMenu"><font color="#fc7c05">O</font>fertas</div>
</div>
<div id="capaContactar" class="opcionMenu" onMouseOver="javascript: imagenMenuOver('contactar', 'img/fondoTextoMenuOver.jpg');" onMouseOut="javascript: imagenMenuOut('contactar', 'img/fondoTextoMenu.jpg');" onClick="javascript: imagenMenuClick('capaContactar', 'contactar', 'img/fondoTextoMenuOver.jpg');">
<img id="contactar" src="img/fondoTextoMenu.jpg" alt="Menu">
<div class="textoMenu"><font color="#fc7c05">C</font>ontactar</div>
</div>
<div id="capaQuienes" class="opcionMenu" onMouseOver="javascript: imagenMenuOver('quienes', 'img/fondoTextoMenuOver.jpg');" onMouseOut="javascript: imagenMenuOut('quienes', 'img/fondoTextoMenu.jpg');" onClick="javascript: imagenMenuClick('capaQuienes', 'quienes', 'img/fondoTextoMenuOver.jpg');">
<img id="quienes" src="img/fondoTextoMenu.jpg" alt="Menu">
<div class="textoMenu"><font color="#fc7c05">Q</font>uienes <font color="#fc7c05">S</font>omos</div>
</div>

Lo que quiero hacer es cuando pincho en una opcion del menu, se me cambie el evento onmouseout de esa opcion para que cuando se quite el raton de encima, se quede la imagen resaltada, y cuando se pinche en otra opcion del menu, este evento vuelva a su estado original, es decir, cambiarlo otra vez para que cuando se quite el raton de encima, la opcion no quede resaltada.

Lo que me pasa ahora es que no me hace nada en el evento, de echo, es como si me bloqueara el evento onmouseout, ya que si pongo un alert(), cuando pincho una vez y retiro el raton del boton, ya no salta el alert, es como si anulara el evento, nose.

Bueno, espero haberme explicado, sino me dan un toque xDD. Gracias.

[Pastilla666]

Iniciado por Pastilla666

Hola a todos, ya llevo tiempo con este problema de intentar cambiar los parametros que tiene el onMouseOut de un Tag con javascript pero no lo consigo con el Explorer.

De echo, estube discutiendo en un foro sobre este tema en esta misma web, deje el trabajo que estaba haciendo y ahora, al retomarlo de nuevo y de darle muchas vueltas, me he dado cuenta de que sigue sin funcionar, ahora tengo simplifado el codigo, os lo dejo aki para que veais.


Aqui os dejo el Javascript:



Aqui os pongo el HTML:


Lo que quiero hacer es cuando pincho en una opcion del menu, se me cambie el evento onmouseout de esa opcion para que cuando se quite el raton de encima, se quede la imagen resaltada, y cuando se pinche en otra opcion del menu, este evento vuelva a su estado original, es decir, cambiarlo otra vez para que cuando se quite el raton de encima, la opcion no quede resaltada.

Lo que me pasa ahora es que no me hace nada en el evento, de echo, es como si me bloqueara el evento onmouseout, ya que si pongo un alert(), cuando pincho una vez y retiro el raton del boton, ya no salta el alert, es como si anulara el evento, nose.

A ver, esta es la linea que no me funciona, a ver si hay alguna otra manera de ponerlo en Javascript

ObjCapa.setAttribute("onmouseout","javascript: imagenMenuOut ('"+nomObj+"', 'img/fondoTextoMenuOver.jpg')");

Bueno, espero haberme explicado, sino me dan un toque xDD. Gracias.

[typerest]

Por lo que he visto el método setAttribute no sirve en internet explorer, hay dos formas alternativas:

1. Utilizar el método propio de IE llamado attachEvent, puedes buscar informacion en la web de microsoft pero si quieres una referencia rapida la sintaxis seria:

objeto.attachEvent('nombre_del_evento',funcion);

Si utilizas esta funcion necesitaras utilizar tambien la funcion detachEvent('nombre_del_evento',funcion) para deshacer los cambios


2. Utilizar un metodo un poco mas chapuza pero mas estandar que el primero:

objeto.nombre_del_evento = funcion;


Espero que te sirva

[Cap.Buscapina]

Iniciado por Pastilla666

...
Lo que quiero hacer es cuando pincho en una opcion del menu, se me cambie el evento onmouseout de esa opcion para que cuando se quite el raton de encima, se quede la imagen resaltada, y cuando se pinche en otra opcion del menu, este evento vuelva a su estado original, es decir, cambiarlo otra vez para que cuando se quite el raton de encima, la opcion no quede resaltada...

para eso no es necesario cambiar el evento onmouseout, es mas simple y efectivo hacerlo directamente en una funcion utilizando una variable global para almacenar que celda o capa tiene que conservar la imagen resaltada(en el ejemplo se usa la variable 's').

<html>
<head>
<script>
s="";
function over(c){
c.style.backgroundImage="url(f2.jpg)";
}
function out(cc){
if(cc!=s){cc.style.backgroundImage="url(f1.jpg)";
}
}
function clik(ccc){
if(s!=""){s.style.backgroundImage="url(f1.jpg)";}
ccc.style.backgroundImage="url(f2.jpg)";
s=ccc;
}
</script>
<style type="text/css">
<!--
.menu {
background-image: url(f1.jpg);
}
-->
</style>
</head>

<body>
<table width="100" border="0" align="center">
<tr>
<td class="menu" onMouseOver="over(this)" onmouseout="out(this)" onclick="clik(this)"><center>
menu1</center></td>
</tr>
<tr>
<td class="menu" onMouseOver="over(this)" onmouseout="out(this)" onclick="clik(this)"><center>
menu2</center></td>
</tr>
<tr>
<td class="menu" onMouseOver="over(this)" onmouseout="out(this)" onclick="clik(this)"><center>
menu3</center></td>
</tr>
<tr>
<td class="menu" onMouseOver="over(this)" onmouseout="out(this)" onclick="clik(this)"><center>
menu4</center></td>
</tr>
</table>
</body>
</html>

espero te sirva.

saludos

[Pastilla666]

joder, tienes toda la razon, no habia caido en eso, asi es mucho mejor y mas sencillo, muchas gracias Cap.Buscapina y a typerest tambien por contestar, al menos ahora se como se cambian eventos con explorer.

Gracias a los dos.