Problema onclick con onmouesout

gabriel0420 · #1 (**permalink**) 06/01/2011, 12:18

tengo un boto asi:

Código:

<a id="r" class="menu_inf" href="##" onclick="javascript:sel('r')" onmouseover="javascript:il('rf')" onmouseout="javascript:ap('rf')" >&nbsp;RF</a>

El js

Código:

  function sel(id){
document.getElementById(id2).style.backgroundColor='transparent';
}
  
   function il(id){
   document.getElementById(id).style.backgroundColor='transparent';
   }
   
      function ap(id){
   document.getElementById(id).style.backgroundColor='#8ebfe2';
   }

funciona asi:
cuando se pasa el mouse sobre este el fondo se pone transparente,
cuando se Quita el mouse vuelve a su color original.
y cuando se selecciona quiero que se quede en transparente.

selecciono y se hace transparente pero al quitar el mouese me ejecuta el evento onmouseout.

como le puedo hacer para que esto no suceda.

caricatos · #2 (**permalink**) 06/01/2011, 12:36

Hola:

Prueba con:

onclick="lo_que_tienes; this.onmouseout = ''";

No entiendo porqué usas enlaces... si quieres una mano, puedes usar estilos...
En los eventos es redundante poner "javascript:" (más que redundante, yo diría absurdo)

Otra forma sería tener una imagen duplicada y mostrarla, ocultando la original...

Saludos

gabriel0420 · #3 (**permalink**) 06/01/2011, 12:42

Gracias Moderador!
no me funciono.
con lo de las imagfenes duplicadas seria el mismo problema, bueno a como te entendi de aplicarlo.

no habra algo asi que cuando se haga el onclick me ignore el mouseout?

Gracias por la ayuda!
seguire buscando por mi parte tmbn!

caricatos · #4 (**permalink**) 06/01/2011, 12:55

Cita:

Iniciado por gabriel0420

Gracias Moderador!
no me funciono.
con lo de las imagfenes duplicadas seria el mismo problema, bueno a como te entendi de aplicarlo.

no habra algo asi que cuando se haga el onclick me ignore el mouseout?

Gracias por la ayuda!
seguire buscando por mi parte tmbn!

Hola:

¿Cómo lo has probado...?
¿Con qué navegador...?

Acabo de probar esto:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
	http://www.caricatos.net/probador
</title>

</head>
<body>

</body>
<img src="../dibujos/miemoticon.gif" 
style="background-color: pink; padding: 5em; border: 3px inset blue"
onmouseover="this.style.backgroundColor = 'red'"
onmouseout="this.style.backgroundColor = 'pink'"
onclick="this.style.backgroundColor = 'red'; this.onmouseout = ''"
 />
</html>

Lo puedes probar en mi probador (Probador de scripts)

Saludos

gabriel0420 · #5 (**permalink**) 06/01/2011, 13:11

en el chrome, pero tengo mas botones como ese y quiero que cuando seleccione otro este vuelva asu forma original :P!
usare ese codigo con rtu permiso y a ver como le hago para que haga lo que quiera Gracias!

caricatos · #6 (**permalink**) 06/01/2011, 13:29

Hola:

Por lo que veo, debe tratarse de un menú o similar, así que aún con mi nueva respuesta te faltará algo...

La idea es usar una variable para guardar el elemento seleccionado:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
	http://www.caricatos.net/probador
</title>
<script type="text/javascript">
elegida = "";
</script>
</head>
<body>
<img src="../dibujos/miemoticon.gif" id="img1"
style="background-color: pink; padding: 5em; border: 3px inset blue"
onmouseover="this.style.backgroundColor = 'red'"
onmouseout="if (this.id != elegida) this.style.backgroundColor = 'pink'"
onclick="elegida = this.id"
 />
<img src="../dibujos/miemoticon.gif" id="img2"
style="background-color: pink; padding: 5em; border: 3px inset blue"
onmouseover="this.style.backgroundColor = 'red'"
onmouseout="if (this.id != elegida) this.style.backgroundColor = 'pink'"
onclick="elegida = this.id"
 />

</body>
</html>

Saludos

gabriel0420 · #7 (**permalink**) 06/01/2011, 13:44

en tu probador no me funciona como kiero!
pero gracias este codigo me servira mucho para otras cosas!
claro lo analizare mas!

saludos :D

gabriel0420 · #8 (**permalink**) 06/01/2011, 13:46

me trabajo con el codigo anterior, pero como que se "atonta" a la 3ra vez! y ay despeus e acomoda. Gracias le seguire moviendo!

caricatos · #9 (**permalink**) 06/01/2011, 14:08

Cita:

Iniciado por gabriel0420

en tu probador no me funciona como kiero!
pero gracias este codigo me servira mucho para otras cosas!
claro lo analizare mas!

saludos :D

Hola:

Con chrome funciona tal cual has preguntado, pero, al menos en mi versión portable, debe probarse en una ventana (supongo que por alguna razón de seguridad)...

Lo que pasa, y por eso el último comentario, es que no se regenera el color en la imagen "no elegida"... si eso es lo que sucede, prueba esto:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
	http://www.caricatos.net/probador
</title>
<script type="text/javascript">
var elegida = "";
</script>
</head>
<body>
<img src="../dibujos/miemoticon.gif" id="img1"
style="background-color: pink; padding: 5em; border: 3px inset blue"
onmouseover="this.style.backgroundColor = 'red'"
onmouseout="if (this.id != elegida) this.style.backgroundColor = 'pink'"
onclick="if ((elegida != this.id) && (elegida != '')) document.getElementById(elegida).style.backgroundColor = 'pink'; elegida = this.id"
 />
<img src="../dibujos/miemoticon.gif" id="img2"
style="background-color: pink; padding: 5em; border: 3px inset blue"
onmouseover="this.style.backgroundColor = 'red'"
onmouseout="if (this.id != elegida) this.style.backgroundColor = 'pink'"
onclick="if ((elegida != this.id) && (elegida != '')) document.getElementById(elegida).style.backgroundColor = 'pink'; elegida = this.id"
 />

</body>
</html>

Saludos

Ribon · #10 (**permalink**) 06/01/2011, 14:15

en los onclick no debes poner javascript:
eso es solo cuando lo llamas desde el href

saludos