El objeto Image - La matriz images

El lenguaje JavaScript posee un objeto propio asociado a cada una de las imágenes de un documento HTML, el objeto Image. Además, también posee un array particular, el array images, que contiene todas las imágenes presentes en la página.

Dentro de la jerarquía propia de este lenguaje, tanto el objeto Image como la matriz images se encuentran incluidos dentro del objeto document, que a su vez se encuentra incluido en al objeto principal window.

Por lo tanto, al ser estos objetos elementos propios del lenguaje, podemos referirnos a ellos y acceder a sus propiedades de forma directa, sin tener que recurrir a capas ni otros elementos externos. Así, podemos acceder directamente a una propiedad cualquiera de una imagen del documento de dos formas diferentes:

1) Mediante el objeto Image, siendo la sintaxis general en este caso la siguiente:

document.nombre_imagen.nombre_propiedad

donde nombre_imagen es el nombre asignado a la imagen mediante su atributo NAME (es condición indispensable para usar este método el haber asignado a la imagen un nombre identificador único mediante el atributo NAME). nombre_propiedad define la propiedad a la que queremos acceder.

2) Mediante la matriz images[]. Esta matriz contiene todas las imágenes del documento, empezando su índice interno por 0, como en todos los arrays de JavaScript. La sintaxis general es del tipo:

document.images[indice].nombre_propiedad

La equivalencia entre indice y la imagen que le corresponde se establece de forma secuencial, de tal forma que images[0] representará a la primera imagen insertada en el BODY de la página, images[1] a la segunda, y así sucesívamente, salvo que se haga una declaración explícita al respecto.

El array images posee la propiedad length, que almacena el número de imágenes presentes en el documento. Para obtener éste, basta con escribir:

document.images.length.

Ejemplos:

• Acceso a la propiedad WIDTH de la imagen bandera:

  document.images.bandera.width

  o bien,

  document.bandera.width

• Acceso a la propiedad SRC de la imagen bandera:

  document.images[1].src

Como ejemplo práctico, vamos a mostrar en pantalla la anchura de la imagen siguiente:

que hemos introducido en la página mediante:

<img src="images/logo.gif" name="logotipo" width="249" height="28" border="0">

y para ello escribimos:

<form>
<input type="button"value= "dimeanchura"onClick="alert('anchura='+document.logotipo.width)">
</form>

que podemos ver en acción pulsando el botón creado:

De esta forma podemos acceder y/o cambiar cada una de las propiedades de una imagen. Por ejemplo, si queremos cambiar la anchura de la imagen anterior basta con escribir:

document.logotipo.width="100"

que podéis comprobar pulsando el siguiente botón:

Nota: el atributo width es de sólo lectura para Nestcape 4x, por lo que podemos leer su valor, pero no modificarlo. En cambio, sí podemos hacer esto en Internet Explorer y en Nestcape 6x.

Podéis ver más sobre las propiedades o atributos de una imagen en el manual del tratamiento de imágenes en Javascript pero vamos a ver un resumen de ellas en el siguiente capítulo.