Cambio de imágenes

Si quieres hacer un índice cuyos elementos se iluminen si pasas el ratón por encima suyo, en esta página te enseñaremos cómo. Funciona con todos los navegadores capaces de reproducir este efecto (Netscape 3, Explorer 4 y superiores).

Una sóla imagen

Al pasar el ratón por encima de la imagen que tienes aquí debajo, podrás observar que el gráfico cambia.

Para hacer esto deberemos crear dos gráficos distintos: el que se verá normalmente y el que únicamente podrá verse cuando el ratón pase por encima. Si llamamos al primero, por ejemplo, apagado.gif y al segundo encendido.gif el código necesario para que el truco funcione es:

<HTML>
<HEAD>
  <TITLE>Ejemplo de imagenes</TITLE>
  <SCRIPT LANGUAGE="JavaScript">
    if (document.images) {
      var activado=new Image();
      activado.src="encendido.gif";
      var desactivado= new Image();
      desactivado.src="apagado.gif";
    }
    function activar(nombreImagen) {
      if (document.images) {
        document[nombreImagen].src=activado.src; }
    }
    function desactivar(nombreImagen) {
      if (document.images) {
        document[nombreImagen].src=desactivado.src; }
    }
  </SCRIPT>
</HEAD>
<BODY>
<A HREF="mipagina.html"
   onMouseOver="activar('prueba');"
   onMouseOut="desactivar('prueba');">
 <IMG NAME="prueba" SRC="apagado.gif" BORDER=0></A>
</BODY>
</HTML>

Lo primero que hay que indicar es que para que funcione el invento la imagen debe ser un enlace. ¿Por qué? Porque los eventos que controlan si el ratón pasa o no por encima no son admitidos por la etiqueta <IMG>. También deberemos "bautizar" nuestra imagen usando el atributo NAME="como-se-llame" para permitir al código su identificación posterior.

El ejemplo funciona de la siguiente manera: en principio la imagen que vemos es la desactivada, que es la que indica la etiqueta <IMG>. Al pasar el raton por encima de ella el evento onMouseOver llamará a la función activar llevando como parámetro el nombre de la imagen. Esta función sustituirá en el objeto document el nombre del fichero donde se guarda la imagen por encendido.gif, que es el gráfico activado. Cuando apartemos el ratón de la imagen, será el evento onMouseOut el que se active, llamando a desactivar. Esta función sustituirá el gráfico de nuevo, esta vez por apagado.gif.

Leyendo esta explicación parece que una parte del código sobra. ¿Para qué sirve declarar dos objetos Image para albergar los gráficos? ¿No bastaría con cambiar directamente el nombre de la imagen escribiendo document[nombreImagen].src = 'encendido.gif';? Pues no del todo. Efectivamente funcionaría, pero cada vez que cambiásemos el nombre el navegador se traería la imagen del remoto lugar donde se encontrara. Es decir, cada vez que pasásemos el ratón por encima de la imagen o nos alejaramos de ella tendríamos que cargar (aunque ya lo hubiésemos hecho antes) el gráfico correspondiente. Es cierto que con la caché del navegador este efecto quedaría algo mitigado, pero siempre es mejor precargar las imágenes usando el objeto Image, ya que así el navegador comenzará a leer el gráfico en cuanto ejecute el código en vez de esperar a que el usuario pase por encima de la imagen con el ratón. El objeto Image tiene como atributos los distintos parámetros que puede tener la etiqueta <IMG>.

Por último, hay que estudiar que significa eso de if (document.images). En los navegadores que no poseen JavaScript 1.1 (léase Netscape 2 y Explorer 3 e inferiores) el objeto Image no existe y dará un mensaje si se lo encuentra por ahí. La solución a este problema consiste en detectar la capacidad del navegador para manipular gráficos preguntandole por la existencia del array document.images. Así podremos no crear las variables que guardan los gráficos ni ejecutar el código de las funciones para activar y desactivar en el caso de que el navegador no soporte este array, lo cual es lo mismo que decir que soporta la versión 1.1 de JavaScript.

Varias imágenes

La cosa se complica cuando utilizamos más de una imagen. Para simplificar el código conviene renombrar todas los gráficos que vamos a utilizar del siguiente modo:

Todos comienzan con la misma palabra, luego su número, y finalmente la letra a si corresponde a un gráfico que se muestra sólo al pasar el ratón por encima.

Lo primero que vamos a modificar del código original es la precarga de imágenes. Lo que haremos será crear dos arrays, uno para las imagenes originales (desactivado) y otro para las que se iluminan (activado). El índice de cada array será el nombre que luego asignaremos a la imagen en el parámetro <IMG NAME>.

if (document.images) {
  var activado = new Array();
  var desactivado = new Array();
  for (i=0; i<=1; i++) {
    activado["menu"+i] = new Image();
    desactivado["menu"+i] = new Image();
    activado["menu"+i].src = "menu"+i+"a.gif";
    desactivado["menu"+i].src = "menu"+i+".gif";
  }
}

Las funciones que modifican las imágenes no cambian mucho. Tan sólo el lado derecho de la igualdad. Ahora el nuevo gráfico a cargar será el correspondiente dentro de cada array.

function act(nombreImagen) {
  if (document.images)
    document[nombreImagen].src=activado[nombreImagen].src;
}
function desact(nombreImagen) {
  if (document.images)
    document[nombreImagen].src=desactivado[nombreImagen].src;
}

Por último deberemos tener cuidado con la manera de nombrar las imágenes en el código HTML. Debemos llamarlas por el nombre (sin el .gif) de su gráfico desactivado:

<A HREF="../recursos.htm"
   onMouseOver="act('menu0');"
   onMouseOut="desact('menu0');">
 <IMG NAME="menu0" SRC="menu0.gif" BORDER=0></A>

De este modo lograremos un bello resultado. Este truco es, por supuesto, extensible al número de imágenes que se necesiten, siempre y cuando se las nombre como se ha indicado y se aumente el número que aparece como límite en el <IMG NAME>.

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
ARTÍCULO ANTERIOR

SIGUIENTE ARTÍCULO

HAY 27 COMENTARIOS
  • Irene dijo:

    Está muy bien explicado, vale, pero yo lo he probado, y no sé porqué, pero no funciona. Igual yo he metido la pata en algo, pero por más vueltas que le he dado, no encuentro el error.

  • Emrique Crespo dijo:

    Lo que quiero hacer es que al pasar el mouse por arriba de la imagen, me desplege otra imagen, y despues otra, algo asi como una "animacion". Seria Fantastico que me contestaras, Tengo bastantes ocnocimientos de C, C++ y Java, pero de JavaScript todo lo que se es lo de tu curso.

  • David Alonso dijo:

    Una vez conseguido el cambio de la imagen al pasar sobre ella el puntero del ratón, ¿cómo se podría hacer para cambiar al mismo tiempo, no solo esa imagen, sino además otra que esté en otra posición diferente en la página?.

  • Alvaro dijo:

    Cargar varias imagenes como si fueran diapositivas.Me imagino que será con un temporizador.Cargar una imagen, a lo dos segundos otra, a los dos segundos otra etc. Gracias.

  • Mercedes dijo:

    ¿Y cómo hacer que al pasar el ratón sobre una imagen lo que cambie sea por ejemplo el color de fondo de un texto (link) o el de una celda de una tabla?

  • Raul Lopez Guevara dijo:

    Aun no logro realizar el cambio de varias imagenes al pasar el raton, el ejemplo resulta sin problemas pero no he podido agregar mas botones o imagenes, te estare muy agradecido si pudieses responderme,tampoco entiendo esa parte de "aumentar el numer que aparece como limite en el " GRACIAS.

  • Manuel Román dijo:

    ...pero no cuesta nada hacer una reelectura para corrgerir la gramática y poner algunas comas y puntos. Se entendería mejor si estubiese bien escrito. De todos modos, la gente no sabe ni lo que es una coma, por lo que si las ponen no van a sacarle provecho. Lo malo es que para los que sabemos lo que es nos dificulta más la lectura de una manera bestial.

  • Salvador dijo:

    quiero que me expliques de talladamente o mandameuna pagina con 6 imajenes diferentes por favor, a mi correo gracias

  • Christian (Chile) dijo:

    Les agradeceria mucho que me devolvieran un mail explicandome como hacer el ejemplo para mas imagenes (7 imagenes). P.D. Los felicito por su pagina (Dainel y Joaquin) me han ayudado bastante, pero este ejemplo no me resulta, hasta me lo se de memoria (Pero para 2 imagenes. Gracias.

  • Ozonek dijo:

    Al usar la precarga de imagenes para graficos de un menu que cambian al pasar el raton (mediante la construccion de objetos images Ej: Boton=new Image();), me encuentro con el problema de que cuando se abre una nueva ventana desde la pagina del menu; todos los graficos que precargue para el menu se borran de la memoria y cuando el menu se vuelve a utilizar el navegador tiene que volver a cargarlos poco a poco a medida que el cursor del raton se va posando por los botones. ¿Como puedo evitar ese vaciado de memoria al abrir una nueva ventana? Si no entiendes bien lo que te digo puedes ver lo que pasa en el menu de la pagina ( http://galeon.com/tribaldesign/Principal.html ) al abrir por ejemplo el libro de visitas. Gracias por este espacio.

  • Marcos Sanz dijo:

    Quizá el fallo lo tengais porque no cambiais el tamaño del vector... Para los que no tengais mucha experiencia, me refiero a este fragmento de código: if (document.images) { var activado = new Array(); var desactivado = new Array(); for (i=0; i

  • Ibon G. dijo:

    Bravo por el ejemplo! Llevaba tiempo buscando como hacer este cambio de imagenes. Sin embargo, la precarga de imagenes solo me funciona si éstas estan en el diretorio definido en , y si pongo un path a partir de este, ya no funciona. Alguna sugerencia?

  • Natalia dijo:

    Para que los eventos onMouseOver y onMouseOut funcionen no es neceasrio encerrar la imagen entre etiquetas . La etiqueta también maneja estos eventos.

  • Natalia dijo:

    Para que los eventos onMouseOver y onMouseOut funcionen no es neceasrio encerrar la imagen entre etiquetas . La etiqueta también maneja estos eventos.

  • Sebastian dominguez dijo:

    HOLA A LOS CREADORES DE LA PAGINA ME GUSTARIA SABER COMO HACER EL PROGRAMA PARA 6 IMAGENES PORFA LO NECESITO MAS O MENOS LUEGO ,PORQUE ESTOY VERDE POR ESTRENAR MI PAGINA WEB Y ES LO UNICO QUE ME FALTA ME GUSTARIA QUE ME LO ENVIEN A MI MAIL LA PAGINA ESTA SUPER BUENA SIGAN ADELANTE... CHAO GARCIAS

  • Francisco Vela dijo:

    Al momento de pasar el raton encima de la imagen no me esta refrescando la otra imagen y al abandonar me deja sin imagen, no se si hay algo en especial para que pueda ejecutarse bien

  • Crue dijo:

    y es que no hace el bucle... Sólo funciona con dos porque suma 1 a i pero luego ya no sigue haciendo el bucle ni sumando... No sé ´cómo conseguir que funcione, por favor, mentes iluminadas, dadme un poco de luz y descubridme vuestros secretos... ¿Cuál es la solución? Es urgente, porfa porfa porfaaaaaaa... O:) Gracias.

  • Crue dijo:

    después de escribir ayer el mensaje en este foro, seguí dándole vueltas al tema... Qué error de principiante (que lo soy, pero no tanto...) más tonto, dioses... Si sólo tenemos dos botones (menu0 y menu1)y al bucle le estamos diciendo que mientras que i

  • Tauko dijo:

    No consigo que funcione ni para 2 imagenes, ni para 6. Tengo 3 imagenes menuXon.jpg y menuXoff.jpg, y tres mas con nombres distintos. Como lo hago?

  • Adrian dijo:

    Ya se como se utiliza el slide show(en el cambiar una imagen cada cierto tiempo valido para muchas imagenes, pero mi problema es q quiero poner varias imagenes cambiando a la vez, son como thubnails de pelis cambiando 4 o 5 a la vez como se hace esto

  • fher dijo:

    El fallo esta en el "for (i=0; i

  • Paula dijo:

    Estoy usando el script para hacer un menu y funciona buenisimo. El problema está en que al cargarse la página parecen no cargarse las imágenes, para que aparezcan tengo que pasar el mouse por encima y recién en ese momento todo funciona como debería. Me pasa lo mismo cuando cargo esta página con el ejemplo que ponen... En otra computadora pasa lo mismo.¿Cuál será el problema? (Estoy usando IE 6 y Mozilla 1.3)

  • Ivan Andrade Muñoz. dijo:

    Esta súper interesante los cambios de imagen. Pero para varias imágenes no lo pude hacer ya que la pagina web no muestra la imagen ubicada en “articulos/tw_rollover/281298ª.gif” . Se usa para renombrar los gráficos. Desde ya gracias, si alguien me puede enviar esta imagen, para poder desarrollar el ejemplo. Good Bye. Punta Arenas. Chile.

  • jesus dijo:

    estube meditanto el codigo pero no logro comprenderlo os pido ayuda para poder hacerlo con 6 imagenes ó si no es mucha molestia que me lo mandes ami correo gracias

  • karla dijo:

    mira yo quisiera que me ayudaras a crear un usuario con una contrasena para una pagina, osea el codigo que tengo que utilizar porfavor, gracias....

  • ivette dijo:

    ,,,,

  • ivette dijo:

    ,,,,

Conéctate o Regístrate para dejar tu comentario.