Curso de Javascript 1.2

En esta página:


Objeto Image

Este objeto representa a una imagen. Se puede acceder a las diversas imágenes del documento por medio del vector de referencias document.images[]. Este objeto está disponible desde el Netscape 3 y el Explorer 4. Sus propiedades más importantes son:
src

Contiene el archivo de la imagen.
lowsrc

Los navegadores admiten incluir un nombre de imagen que se cargue antes que la imagen final. Es útil para poner una imagen que ocupe poco mientras esperamos que se cargue la imagen final, que puede ocupar una cantidad insultante de espacio. Esta propiedad permite accede al archivo de esa primera imagen pequeña.
complete

Valor lógico que será true si la imagen ha terminado ya de cargarse.

También dispone de diversas propiedades de sólo lectura que se corresponden con los atributos de la etiqueta <IMG> como, por ejemplo, width o border.

Tratamiento de imágenes

Lo que vamos a lograr con este truco es un pequeño cambio de imágenes. En muchas páginas, al pasar el ratón por encima de una imagen puedes 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:

imagenes.html 
<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). Los navegadores en que no exista el objeto Image darán un mensaje de error si se lo encuentran por ahí. La solución a este problema consiste en detectar la capacidad del navegador para manipular gráficos preguntandole por la existencia del vector 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 vector.

Y este es nuestro ejemplo funcionando: