Foros del Web » Programando para Internet » Javascript »

como cambiar las propiedades de onmouseover

 Estas en el tema de como cambiar las propiedades de onmouseover en el foro de Javascript en Foros del Web. Buenas, estoy haciendo un menu donde cambio la imagen con onmouseover y onmouseout, el problema esta que quiero q cuando se pulse una opcion de ...
  #1 (permalink)  
Antiguo 11/12/2005, 06:56
 
Fecha de Ingreso: septiembre-2005
Ubicación: Vejer de la Fra, Cádiz
Mensajes: 83
Antigüedad: 18 años, 7 meses
Puntos: 0
como cambiar las propiedades de onmouseover
Buenas, estoy haciendo un menu donde cambio la imagen con onmouseover y onmouseout, el problema esta que quiero q cuando se pulse una opcion de ese menu, se me quede la imagen que tengo puesta en onmouseover, es decir, que en el onmouseout se cambie la imagen que tiene el onmouseover, para que se kede fija, nose si me explico, os pongo lo que he hecho a ver si queda un poco mas claro,

Cita:
var gko = navigator.userAgent.toLowerCase();

var antes = document.getElementById("imagen_ant").title;
document.getElementById("imagen_ant").setAttribute ("title", familia);

if (antes != 0 && antes != familia)
{
if (url == "productos.php")
document.getElementById(antes).style.display = 'none';

var elemento_antes = document.getElementById('princ_'+antes);

if (gko.indexOf('gecko')!=-1) //si soporta gecko, es Mozilla, Netscape, Safari, etc
{
elemento_antes.setAttribute("style","background-image:url(menus/submenu.jpg);");
elemento_antes.setAttribute("onMouseOut","javascri pt:this.style.background = 'url(menus/submenu.jpg);'");
}
else //es I.Explroer
{
elemento_antes.setAttribute("style","background-image:url(menus/submenu.jpg);");
elemento_antes.onmouseout = function() {elemento_antes.style.background = "url(menus/submenu.jpg)"};
}
}
En el firefox va bien, pero en IE, he probado algunas variaciones para cambiar el atributo del onmouseout, pero nada, no lo consigo, os las dejo aqui:

Cita:
elemento_antes.style.setAttribute("background-image", "url(menus/"+foto_antes+".jpg);");
elemento_antes.setAttribute = function() {elemento_antes.style.background = "url(menus/"+foto_antes+".jpg)"};
elemento['style']=new Function("javascript:this.style.background = 'url(menus/"+antes+".jpg);'");//creamos en setAttribute de esta forma
elemento['onmouseout']=new Function("javascript:this.style.background = 'url(menus/"+antes+".jpg);'");//creamos en setAttribute de esta forma
estos ejemplos, los he ido modificando yo por mi cuenta y buscando por ahi, no se ni siquiera si estan bien, pero por probar...

Bueno, a ver si me podeis ayudar un poco, xq ya estoy un poco desesperao con esto. Gracias.
  #2 (permalink)  
Antiguo 11/12/2005, 09:50
Avatar de caricatos
Moderador
  
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Hola Pastilla666:

Menudo lío parece que tienes...

Para cambiar el evento mouseout debes poner onmouseout en minúscula...

Trata de indicarnos lo que quieres... (tal como lo pones no llego a enterarme)

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 11/12/2005, 17:52
 
Fecha de Ingreso: septiembre-2005
Ubicación: Vejer de la Fra, Cádiz
Mensajes: 83
Antigüedad: 18 años, 7 meses
Puntos: 0
Hola caricatos, ok, lo intentare xDD.

Menu (las opciones tienen imagenes) -> "Imagen"

onmouseover -> "Imagen Resaltada"
onmouseout -> "Imagen"

Lo que necesito es que cuando se pinche en una opcion, esta, se quede con la "Imagen Resaltada", por eso intento cambiar el onmouseout para poner "Imagen Resaltada". De esta manera pases o quites el raton por encima de esa opcion, la imagen siempre quede resaltada.

Espero haber aclarado un poco mi duda. Gracias
  #4 (permalink)  
Antiguo 12/12/2005, 09:57
Avatar de Cap.Buscapina  
Fecha de Ingreso: octubre-2004
Ubicación: Argentina
Mensajes: 836
Antigüedad: 19 años, 6 meses
Puntos: 4
si no entendí mal:

Código HTML:
<html>
<head>
<title></title>
<script>
var Click="";
function clk(cc){
Click.className="fondo";
Click=cc;
}
function over(c){
c.className="fondo_over";
}
function out(C){
C.className="fondo";
Click.className="fondo_over";
}
</script>
<style type="text/css">
<!--
.fondo {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #666666;
	background-color: #FFFFCC;
	background-image: url(fondo.gif);
}
.fondo_over {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #eeeeee;
	background-color: #FF9900;
	background-image: url(fondo_over.gif);
}
-->
</style>
</head>
<body >
<table width="100" border="1" align="center">
  <tr>
    <td width="100" height="40" class="fondo" onclick="clk(this)" onmouseover="over(this)" onmouseout="out(this)">&nbsp;</td>
  </tr>
  <tr>
    <td width="100" height="40" class="fondo" onclick="clk(this)" onmouseover="over(this)" onmouseout="out(this)">&nbsp;</td>
  </tr>
  <tr>
    <td width="100" height="40" class="fondo" onclick="clk(this)" onmouseover="over(this)" onmouseout="out(this)">&nbsp;</td>
  </tr>
</table>
</body>
</html>
Simepre y cuando utilices dos imágenes (una de fondo y otra al hacer el over y click), aunque si no se podría modificar.
__________________
by Capitán Buscapina
.
  #5 (permalink)  
Antiguo 12/12/2005, 11:58
(Desactivado)
  
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
hola todos :

Pastilla666 : a ver si adivino qué es lo que haces. Tienes un menú sin select, hecho con javascript. Y cada opción tiene una viñeta, una 'flechita', un ícono asociado a su ... ¿izquierda?.
Cuando pasas el puntero la viñeta se 'activa' y cuando lo sacas se vuelve a 'reposo'. Lo que quieres es que si el usuario elige una opción, ésta se quede 'activada' y ya; que no cambie más.

Un tema sería cómo está hecho realmente el menú. Otro hasta cuando se mantiene la marca.

Veamos. Si las opciones se van a otro documento, cualquier marca se pierde; porque se cambia de página y para volver tienes que recargar; si abre una nueva ventana, podría andar. Igual que si no abre nada ,sino que te cambia un texto, un color ...

Si realmente quieres que se mantenga el cambio de viñeta en un botón a otro documento, tendrás que usar una cookie o mejor enlaces, y darle la imagen con visited.

Pero vamos a suponer que no se vaya del documento. El código de Cap.Buscapina ( ) te sirve, aunque quizá se podría simplificar usando otra clase. No sé.

Esa tercer clase sería igual a fondo_over pero con otro nombre, y se asignaría con click. Y con un condicional antes del mouseover o el mouseout leeríamos la clase, cuando no sea igual a la del click, le cambiamos la viñeta.

La verdad que ahora que lo escribo no sé si es más práctica.

Voy a ver si hago alguna con la idea del enlace.

saludos
  #6 (permalink)  
Antiguo 12/12/2005, 18:21
Avatar de Cap.Buscapina  
Fecha de Ingreso: octubre-2004
Ubicación: Argentina
Mensajes: 836
Antigüedad: 19 años, 6 meses
Puntos: 4
hola FUROYA (y a los demas también), si bien comprendo lo que planteas, me pareció un ejemplo sencillo de lo que se podía hacer (solo para entender la mecánica), ya que se podría hacer mas completo, y desde luego utilizar alguna que otra clase mas.

Mi duda era (en realidad sigue siendo) si PASTILLA666 quería asignar una imagen distinta a cada opción del menu (ya esto complicaría algo mas las cosas).

De todas formas sería interesante que nos comente si estamos bien rumbeados o si en realidad pretende alguna otra cosa.

Saludos
__________________
by Capitán Buscapina
.
  #7 (permalink)  
Antiguo 14/12/2005, 17:50
 
Fecha de Ingreso: septiembre-2005
Ubicación: Vejer de la Fra, Cádiz
Mensajes: 83
Antigüedad: 18 años, 7 meses
Puntos: 0
Gracias a los 2, eso es lo que busco, pero quiero que la opcion del menu vuelva a su "estado natural" cuando se pinche en otra opcion.

El menu llama a funciones javacscript, que me van mostrando datos en pantalla, no recargo la pagina, ni llamo a otra ni nada, todo se queda en la misma.

Voy a intentar mandar el codigo que tengo, a ver si le podeis echar un vistazo.

Yo no hago nada de clases (nose mucho de javascript), simplemente busco por "Document.getElementById" y le cambio el style-background. Lo raro de mi problema es que en IE la cosa sale bien pero solo pulsando la primera opcion, en cuando pulso la segunda ya me hace cosas raras.

Index.php
Cita:
<div class="mainDiv" id="princ_noticias"
style="background-image:url(menus/submenu.jpg); background-image:menus/impresora_icono.jpg;"
onMouseOver="javascript:this.style.background = 'url(menus/submenu_2.jpg)'"
onMouseOut="javascript:this.style.background = 'url(menus/submenu.jpg)'">

<div class="topItem" classOut="topItem" classOver="topItemOver"
onclick="cambio('noticias', 'index.php');
cambio_contenido(this, 'noticias.htm', '250');">

<img src="menus/noticias_icono.jpg" style="margin-left:2px;" align="middle">&nbsp;Noticias

</div>
</div>

<div class="mainDiv" id="princ_servicios"
style="background-image:url(menus/submenu.jpg);"
onMouseOver="javascript:this.style.background = 'url(menus/submenu_2.jpg)'"
onMouseOut="javascript:this.style.background = 'url(menus/submenu.jpg)'">

<div class="topItem" classOut="topItem" classOver="topItemOver"
onclick="cambio('servicios', 'index.php');
cambio_contenido(this, 'servicios.htm', '1100');">

<img src="menus/servicios_icono.jpg" style="margin-left:2px;" align="middle">&nbsp;Servicios

</div>
</div>

<div class="mainDiv" id="princ_nuestra-empresa"
style="background-image:url(menus/submenu.jpg);"
onMouseOver="javascript:this.style.background = 'url(menus/submenu_2.jpg)'"
onMouseOut="javascript:this.style.background = 'url(menus/submenu.jpg)'">

<div class="topItem" classOut="topItem" classOver="topItemOver"
onclick="cambio('nuestra-empresa', 'index.php');
cambio_contenido(this, 'nuestra-empresa.htm', '400');">

<img src="menus/nuestra-empresa_icono.jpg"
style="margin-left:2px;" align="middle">&nbsp;Nuestra Empresa

</div>
</div>
Javascript.js
Cita:
function cambio(familia, url)
{
var gko = navigator.userAgent.toLowerCase();

//En la variable antes, guardo el ID del menu que pinchamos anteriormente
(creo que es aqui donde esta el problema)
var antes = document.getElementById("imagen_ant").title;
//Esto es una chapuza que me he hecho para guardar en este tag el ID
del elemento al que acabamos de pinchar, para en la siguiente entrada a la funcion
pasarselo a la variable antes
document.getElementById("imagen_ant").setAttribute ("title", familia);

//Aqui entra cuando ya tenemos un elemento pinchado y le damos a otro,
es decir, para poner un elemento del menu a su "estado natural"
if (antes != 0 && antes != familia)
{
var elemento_antes = document.getElementById('princ_'+antes);

if (gko.indexOf('gecko')!=-1) //si soporta gecko, es Mozilla, Netscape, Safari, etc {
elemento_antes.setAttribute("style","background-image:url(menus/submenu.jpg);");
elemento_antes.setAttribute("onMouseOut","javascri pt:this.style.background = 'url(menus/submenu.jpg);'");
}
else //es I.Explroer
{ elemento_antes.setAttribute("style","background-image:url(menus/submenu.jpg);");
elemento_antes.onmouseout = function() {elemento_antes.style.background = "url(menus/submenu.jpg)"};
}
}

//Aqui lo que se hace es para dejar la "Imagen Resaltada"
if (gko.indexOf('gecko')!=-1) //si soporta gecko, es Mozilla, Netscape, Safari, etc
{
elemento.setAttribute("style","background-image:url(menus/submenu_2.jpg)");
elemento.setAttribute("onMouseOut","javascript:thi s.style.background = 'url(menus/submenu_2.jpg)'");
}
else //es I.Explroer
{
elemento.setAttribute("style","background-image:url(menus/submenu_2.jpg);");
elemento.onmouseout = function() {this.style.background = "url(menus/submenu_2.jpg)"}
}
}
}
Yo creo que el problema que tengo es al guardar la variable "antes", guardo el id del menu que acabo de pinchar, para que cuando pinche en otro, vuelva a su "estado natural" el que esta en antes.

Bueno, gracias y a ver si podemos resolver este lio.

Aqui os mando la direccion para que lo veais en funcionamiento
http://www.clusterinformatica.com/menu.htm

Ya vereis que cuando se picha en el segundo enlace, el primero no cambia a no ser que paseis el raton por encima

PD-> Con Mozilla funciona bien, no funciona con IE.
Última edición por Pastilla666; 15/12/2005 a las 04:05
  #8 (permalink)  
Antiguo 14/12/2005, 18:37
Avatar de Cap.Buscapina  
Fecha de Ingreso: octubre-2004
Ubicación: Argentina
Mensajes: 836
Antigüedad: 19 años, 6 meses
Puntos: 4
Cita:
Iniciado por Pastilla666
PD-> Con Mozilla funciona bien, no funciona con IE.

Con opera tambien cumple con el cometido, aunque con los tres salta el mismo error

Cita:
Reference to undefined variable: cambio_contenido

te falta definir esa funcion (cambio_contenido) qu la llamas varias veces.


Cita:
Yo no hago nada de clases (nose mucho de javascript)
animate, no es tan dificil, y por lo menos a mí me simplifica bastante.
__________________
by Capitán Buscapina
.
  #9 (permalink)  
Antiguo 14/12/2005, 18:46
 
Fecha de Ingreso: septiembre-2005
Ubicación: Vejer de la Fra, Cádiz
Mensajes: 83
Antigüedad: 18 años, 7 meses
Puntos: 0
Cita:
Con opera tambien cumple con el cometido, aunque con los tres salta el mismo error
Cita:
Reference to undefined variable: cambio_contenido
No he puesto la funcion cambio_contenido xq es la que me muestra los datos que quiero ver en pantalla cuando pulso una opcion, pero eso me lo muestra bien.

Acabo de subir el menu al servidor y he cambiado eso, gracias.
  #10 (permalink)  
Antiguo 14/12/2005, 18:54
Avatar de Cap.Buscapina  
Fecha de Ingreso: octubre-2004
Ubicación: Argentina
Mensajes: 836
Antigüedad: 19 años, 6 meses
Puntos: 4
bueno, ahora ya no salta ningun error, pero estoy un poco mareao con el codigo.

Es necesario la diferenciación entre los que soportan geko e IE (porque parece que de allí vine el problem).
__________________
by Capitán Buscapina
.
  #11 (permalink)  
Antiguo 15/12/2005, 04:01
 
Fecha de Ingreso: septiembre-2005
Ubicación: Vejer de la Fra, Cádiz
Mensajes: 83
Antigüedad: 18 años, 7 meses
Puntos: 0
He editado el codigo del archivo javascript, del post anterior, para dejarlo un poco mas claro
  #12 (permalink)  
Antiguo 15/12/2005, 11:55
(Desactivado)
  
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Hola de nuevo :

Ahora entiendo mejor la pregunta, pero como ya está resuelta, dejo el ejemplo con CSS y HTML que se me había ocurrido, porque ya lo mencioné.

Código: 
<html>
<head>
<title>MENÚES.</title>
<script language=" JavaScript">
function xray(T){
var uniforme = document.getElementById("whisky").getElementsByTagName("a");
var victor = uniforme.length;

for(a=0; a<victor; a++){
if(uniforme[a].className == 'zulu')uniforme[a].className = "yankee";
}
T.className = "zulu";
}
</script>
<style>
body{background:silver; }

dt{font-weight:bold; font-size:90%; font-family:"sans-serif"; margin:10px, 0; }

a:link {color: #0000ff; padding-left:20px; height:1em; font: bold 100% "sans-serif"; background:url("http://www.forosdelweb.com/images/statusicon/user_offline.gif") no-repeat;}

a:visited {color: #ff0000; padding-left:20px; height:1em; font: bold 100% "sans-serif"; background:url("http://www.forosdelweb.com/images/statusicon/user_invisible.gif") no-repeat;}

a.yankee:visited {color: #0000ff; padding-left:20px; height:1em; font: bold 100% "sans-serif"; background:url("http://www.forosdelweb.com/images/statusicon/user_offline.gif") no-repeat;}

a.zulu:visited {color: #ff0000; padding-left:20px; height:1em; font: bold 100% "sans-serif"; background:url("http://www.forosdelweb.com/images/statusicon/user_invisible.gif") no-repeat;}

a:hover {color: #00ff00; padding-left:20px; height:1em; font: bold 100% "sans-serif"; background:url("http://www.forosdelweb.com/images/statusicon/user_online.gif") no-repeat;}

a.yankee:hover {color: #00ff00; padding-left:20px; height:1em; font: bold 100% "sans-serif"; background:url("http://www.forosdelweb.com/images/statusicon/user_online.gif") no-repeat;}

a.zulu:hover {color: #00ff00; padding-left:20px; height:1em; font: bold 100% "sans-serif"; background:url("http://www.forosdelweb.com/images/statusicon/user_online.gif") no-repeat;}

a:active {color: #008000; padding-left:20px; height:1em; font: bold 100% "sans-serif"; background:url("http://www.forosdelweb.com/images/smilies/afirmar.gif") no-repeat;}

a.yankee:active {color: #008000; padding-left:20px; height:1em; font: bold 100% "sans-serif"; background:url("http://www.forosdelweb.com/images/smilies/afirmar.gif") no-repeat;}

a.zulu:active {color: #008000; padding-left:20px; height:1em; font: bold 100% "sans-serif"; background:url("http://www.forosdelweb.com/images/smilies/afirmar.gif") no-repeat;}

</style>
</head>
<body>
<h2>Men&uacute; de enlaces con vi&ntilde;etas.</h2>

<dl id="whisky">

	<dt>Estos sitios no existen y no están <i>cacheados </i>.</dt>
<dd><a class="" href="http://www.misitio.net" target="_blank">misitio. </a> </dd>
<dd><a class="" href="http://www.otrositio.net" target="_blank">otrositio. </a> </dd>
	<dt>Este sitio seguro está <i>cacheado </i>y se debe ver "visitado".</dt>
<dd><a class="" href="http://www.google.com" target="_blank" onmouseover="this.title=this.className;">Google. </a> </dd>

	<dt>Este sitio tambi&eacute;n, pero solamente se ve "visitado" con un click durante la sesi&oacute;n.</dt>
<dd><a class="yankee" href="http://www.forosdelweb.com" target="_blank" onclick="this.className='zulu';" onmouseover="this.title=this.className;">ForosDelWeb. </a></dd>
<br />
<br />
	<dt>Estos enlaces se reinician al clickear cualquiera y no mantienen el "visitado" del anterior.</dt>
<dd><a class="yankee" href="http://www.forosdelweb.com" target="_blank" onclick="xray(this);">ForosDelWeb. </a> </dd>
</dd>
<dd><a class="yankee" href="http://www.forosdelweb.com/forumdisplay.php?f=13" target="_blank" onclick="xray(this);">Javascript. </a> </dd>

<dd><a class="yankee" href="http://www.forosdelweb.com/showthread.php?t=356511" target="_blank" onclick="xray(this);">como cambiar las propiedades de onmouseover. </a> </dd>
<br />
<br />
	<dt>Si las direcciones no se pueden guardar en el Historial, sus enlaces no se marcan como "visitados".</dt>
</dl>
<h3>Im&aacute;genes.</h3>

<img src="http://www.forosdelweb.com/images/smilies/afirmar.gif" /> <img src="http://www.forosdelweb.com/images/statusicon/user_online.gif" /> <img src="http://www.forosdelweb.com/images/statusicon/user_invisible.gif" /> <img src="http://www.forosdelweb.com/images/statusicon/user_offline.gif" />

</body>
</html>
Seguramente no es original. Lo que le agregué en JS es el último enlace.
Última edición por furoya; 16/12/2005 a las 13:32
  #13 (permalink)  
Antiguo 16/12/2005, 07:14
 
Fecha de Ingreso: septiembre-2005
Ubicación: Vejer de la Fra, Cádiz
Mensajes: 83
Antigüedad: 18 años, 7 meses
Puntos: 0
Muchas gracias Furoya, probare el ejemplo a ver si puedo mejorar mi web, pero ahora tengo otro problema con este mismo menu. Aqui te dejo el post donde lo he puesto a ver si me puedes ayudar otra vez, gracias de nuevo.
  #14 (permalink)  
Antiguo 16/12/2005, 13:42
(Desactivado)
  
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Edité el código anterior un poco. Pero no es realmente lo que te sirve prque usa enlaces para aprovechar el aviso de "visitado" en cada uno. Igual puedes ver cómo se resuelve el tema de "resetear" el fondo de todos antes de aplicar el nuevo al del click.

Hay varios ejemplos sobre cómo hacerlo en el foro, pero el buscador no andaba (ya sí) y recordé uno que estaba en la página de tunait ( Hola! ).

http://javascript.tunait.com/javascr...=iluminarboton

No entiendo lo de las clases classOut="topItem" classOver="topItemOver" y no estoy seguro de qué interpreta IE.

La pregunta del otro tema supongo que se podría haber hecho también acá. De todas formas, está muy bien eso de linkear para seguir el hilo del asunto.
  #15 (permalink)  
Antiguo 22/12/2005, 04:37
 
Fecha de Ingreso: septiembre-2005
Ubicación: Vejer de la Fra, Cádiz
Mensajes: 83
Antigüedad: 18 años, 7 meses
Puntos: 0
eso de tunait es mas o menos lo que quiero, pero no me funciona el enlace para ver el codigo fuente del script
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 09:17.