David
05 de Septiembre del 2005

Buenas... Necesito que alguien me ayude o me oriente de alguna manera con un menú con capas e imágenes que pretendo hacer. La idea sería parecida a lo que he visto en www.viajar.com
Ahí se ven unas imágenes de los canales que hay en la web y cuando se pasa por encima de las imágenes, cambian de color (realmente hay un cambio de imagen). No sé muy bien cómo hacer eso.
Tampoco pretendo que nadie me dé el código hecho, me conformo con algunas ideas al respecto.
Muchas gracias.

Drocher
05 de Septiembre del 2005

Hay varias maneras de conseguirlo, basicamente tienes que asociar a un evento un cambio del .src de la imagen.

Yo por ejemplo, en mi aplicación tengo varios iconos y para similar un botón tengo las siguientes funciones, definidas en un fichero.js

/*Función que permite buscar la imagen ON de los iconos*/
function OnImage(name) {
if (document.images) {
fullname = eval(name + "2");
document[name].src = fullname.src;
}
}

/*Función que permite buscar la imagen OFF de los iconos*/

function OffImage(name) {
if (document.images) {
fullname = eval(name);
if (fullname.complete)
{
document[name].src = fullname.src;
}
}
}

Despues, sólo me queda definir en el body de mi documento las dos imagenes que se alternarán:

<SCRIPT>
//Imagen para el icono de enlace a información.
if (document.images) {
informacion = new Image();
informacion.src= "../htdocs/imagenes/IcoInfo.gif";
informacion2 = new Image();
informacion2.src "../htdocs/imagenes/IcoInfoON.gif";
}
</SCRIPT>

Y en el Body:

<a href="#" ONMOUSEOVER="OnImage('informacion'); style.cursor='help'"
ONCLICK=""
ONMOUSEOUT="OffImage('informacion');">
<IMG name="informacion" src="../htdocs/imagenes/IcoInfo.gif" valign="center" align="center" border="0" alt="Ayuda" >
</a>

Espero te sea útil.

Un saludo