Suscripción gratis
Susurros
Ariadn@
¿Intimidad?
Artículos
Seguridad
Acceso a BD
Autenticación
Comercio-e
Linux
Navegación segura
Control de acceso
CGI
Java
JavaScript
Cookies
Crashes
Agujeros
Spam
Remailers
Anonimato
Correo
seguro
Web seguro
Consejos prácticos
Referencias
Libro de Visitas
Cambiar imágenes dinámicamente
Una de las aplicaciones más extendidas y vistosas de JavaScript dentro de una página web es el famoso efecto de cambiar la imagen cuando el ratón se desliza sobre ella, por ejemplo en los menús de opciones. Para aprender a realizar este efecto es necesario comprender antes cómo se acceden y manipulan las imágenes en JavaScript. Cada imagen insertada con la etiqueta <IMG> en una página se corresponde con un objeto Image. Además, se crea un array llamado images que contiene secuencialmente, según el orden de inserción en la página, todas las imágenes de ésta. Así pues, una primera forma de referenciar las imágenes en una página sería mediante este array:
| document.images[0] //para la primera imagen del documento document.images[1] //para la segunda imagen del documento etc. |
Ahora bien, si a la hora de insertar una imagen en una página se le da un nombre, éste permitirá referenciarla más cómodamente por este nombre. Por ejemplo, la imagen
| <img name="castillo" src="fotocastillo.gif" width="110" height="80"> |
puede referenciarse desde una sentencia de JavaScript como:
| document.images["castillo"] |
Cuando se generan los efectos de cambio de imagen, deben cargarse además de las imágenes que ya están en la página, las que las sustituirán cuando el ratón pase sobre ellas. Para ello se utiliza lo que se llama precarga de imágenes: cargar una imagen en el caché de manera que cuando sea necesaria se visualice inmediatamente en la página. La precarga se realiza antes de cargar los contenidos del documento, entre las etiquetas <HEAD>:
| boton1_on = new Image(); boton1_on.src = "boton1b.gif"; boton1_off = new Image(); boton1_off.src = "boton1.gif"; |
El constructor del objeto Image crea primero una instancia de la imagen boton1_on, a la que posteriormente le asigna la foto del fichero boton1b.gif. De esta manera, ya ha quedado cargada la imagen en memoria para ser visualizada instantáneamente en cuanto se le invoque. Lo mismo ocurre para la segunda imagen.
Ya sólo queda cambiar la imagen cuando el ratón se deslice sobre ella. Para lograr este efecto se utilizan los eventos onMouseover y onMouseout. El primero se produce cuando el ratón pasa sobre un objeto, mientras que el segundo tiene lugar cuando el ratón abandona el área del objeto:
| <a href = "presentacion.html" onmouseover = "document.images['boton1'].src = boton1_on.src" onmouseout = "document.images['boton1'].src = boton1_off.src"><img src = "boton1.gif" name = "boton1"></a> |
Se están definiendo los gestores de ambos eventos, de manera que cuando el ratón pase sobre la imagen boton1.gif, que a su vez enlaza con la página web presentacion.html, se cargue la imagen boton1_on, que como se definió en la precarga, se corresponde con el fichero boton1b.gif. Cuando el ratón salga del área ocupada por la imagen, entonces se cargará la imagen boton1_off, que se corresponde con el fichero boton1.gif.
Como resultaría muy farragoso tener que escribir todas esas sentencias cada vez para cada hipervínculo, pueden crearse algunas funciones que simplifiquen el trabajo:
| <html> <head> <title>Cambio dinámico de imágenes</title> <script language="Javascript"> <!-- // Precarga de imágenes // Carga de imagen cuando el ratón pasa por encima // Carga de imagen cuando el ratón abandona el área de la imagen //--> </script> <body> |
Este proceso puede repetirse para tantas imágenes como aparezcan en la página web. En la figura más abajo se muestra el resultado.
Copyright © 1997-2000 Gonzalo Álvarez Marañón, CSIC. Todos los derechos reservados.
Criptonomicón es un servicio ofrecido libremente desde el Instituto de Física Aplicada del CSIC. Para información sobre privacidad, por favor consulte la declaración de política sobre privacidad. Para sugerencias, comentarios o quejas, acuda al libro de visitas. Para contribuir al Criptonomicón, lea la página de contribuciones.
.