Menú de imágenes dinámicas
Una vez más recurro a vosotros en busca de ayuda.
Tengo en una página web un menú de opciones formado por botones con imágenes, de forma que cuando el ratón pasa por encima se cambia por otra imagen distinta para destacar el vínculo. El código del enlace es el siguiente:
<a href="Web.htm"><img border="0" id="pena1" onmouseout="pena1.src='botonA.gif' ;" onmouseover="pena1.src=' botonB.gif';" src=" botonA.gif"></a>
Ahora, he cambiado la estructura de mi web y en vez de enlazar a otras páginas, lo que hacen los botones es 'abrir' capas dentro de la misma página web.
Lo que me gustaría saber es cómo puedo hacer para que además de que mis botones cambien de imagen cuando paso por encima con el ratón (de imagen A a Imagen B), también cambie a una tercera imagen diferente cuando hago 'clic' con el ratón sobre el botón, y que permanezca así hasta que pinche con el ratón en otra opción diferente del menú, momento en el que el enlace anteriormente abierto debe volver a la imagen A.
¿Alguien me puede decir qué código puedo utilizar para esto?
Tengo en una página web un menú de opciones formado por botones con imágenes, de forma que cuando el ratón pasa por encima se cambia por otra imagen distinta para destacar el vínculo. El código del enlace es el siguiente:
<a href="Web.htm"><img border="0" id="pena1" onmouseout="pena1.src='botonA.gif' ;" onmouseover="pena1.src=' botonB.gif';" src=" botonA.gif"></a>
Ahora, he cambiado la estructura de mi web y en vez de enlazar a otras páginas, lo que hacen los botones es 'abrir' capas dentro de la misma página web.
Lo que me gustaría saber es cómo puedo hacer para que además de que mis botones cambien de imagen cuando paso por encima con el ratón (de imagen A a Imagen B), también cambie a una tercera imagen diferente cuando hago 'clic' con el ratón sobre el botón, y que permanezca así hasta que pinche con el ratón en otra opción diferente del menú, momento en el que el enlace anteriormente abierto debe volver a la imagen A.
¿Alguien me puede decir qué código puedo utilizar para esto?
1 Respuesta
Respuesta de scriptman
1
Te podría ayudar en base a el método que usas para cambiar imágenes, pero esa forma no es la mejor que podrías usar, en primer lugar porque usas mucho código repetitivo (cosa que una función javascript podría simplificar) y en segundo lugar porque cada que se pone el mouse encima o se aleja, la imagen es llamada a cargarse, es decir, si lo ves desde el web, esto te dará por resultado que no se vea el cambio hasta que la imagen esta en cache (varios segundos después).
Necesitas
1)Un método para precargar las imágenes.
2)Un sistema de imágenes definido (ya sea que todas se llamen:
"loqueseaA.gif"
"loqueseaB.gif"
"loqueseaC.gif"
o bien
"loquesea_on.gif"
"loquesea_off.gif"
"loquesea_act.gif" //de activo
etc...)
3)una función que:
a)Guarde en una variable global el botón activo,
b)lo regrese a su intentar inicial (ya sea "imagenA.gif" o "imagen_off" etc) y cambie hacia el nuevo botón activo y actualize esta variable.
Tienes que decidir como llamar a tus imágenes y el ROLLOVER que vas a usar, hay muchos scripts de rollovers de imágenes en internet, por ejemplo:
http://evolt.jeffhowden.com/jeff/code/preload_n_rollover/index.cfm
Uno en español:
http://www.terra.es/personal2/pagina_de_fuika/trucos/webmaster/img.htm
Varios con "fade-efect":
http://www.javascript-fx.com/fade_rollovers/
O has una búsqueda en yahoo/google "rollover javascript".
Una ves que decidas cual código de rollover vas a usar, te puedo ayudar con la función de imagen activa o cualquier otra duda que tengas.
Saludos,
scriptman.
Necesitas
1)Un método para precargar las imágenes.
2)Un sistema de imágenes definido (ya sea que todas se llamen:
"loqueseaA.gif"
"loqueseaB.gif"
"loqueseaC.gif"
o bien
"loquesea_on.gif"
"loquesea_off.gif"
"loquesea_act.gif" //de activo
etc...)
3)una función que:
a)Guarde en una variable global el botón activo,
b)lo regrese a su intentar inicial (ya sea "imagenA.gif" o "imagen_off" etc) y cambie hacia el nuevo botón activo y actualize esta variable.
Tienes que decidir como llamar a tus imágenes y el ROLLOVER que vas a usar, hay muchos scripts de rollovers de imágenes en internet, por ejemplo:
http://evolt.jeffhowden.com/jeff/code/preload_n_rollover/index.cfm
Uno en español:
http://www.terra.es/personal2/pagina_de_fuika/trucos/webmaster/img.htm
Varios con "fade-efect":
http://www.javascript-fx.com/fade_rollovers/
O has una búsqueda en yahoo/google "rollover javascript".
Una ves que decidas cual código de rollover vas a usar, te puedo ayudar con la función de imagen activa o cualquier otra duda que tengas.
Saludos,
scriptman.
