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), y 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 cero, como en todos los arrays de JavaScript. La sintaxis general es del tipo:
document.images[indice].nombre_propiedad
La equivalencia entre índice 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í sucesivamente, 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 este, basta con escribir:
document.images.length
Propiedades del objeto IMAGE
El objeto Image posee una serie de propiedades, a las que podemos acceder mediante JavaScript, permitiendo este lenguaje leer estas propiedades e incluso cambiar muchas de ellas. La forma de acceder a todas ellas es:
document.nombre_imagen.propiedad
Las principales propiedades del objeto Image son:
name: que referencia el nombre identificador único de la imagen asociada al objeto. La forma de acceder a esta propiedad es:
document.images[indice].name
Podemos, por ejemplo, aprovechar el array images para obtener el name de todas las imágenes de nuestra página:
<script language=»JavaScript» type=»text/javascript»>
var nombres = «»;
for (i=0;i<document.images.length;i++)
{
nombres= + document.images[i].name + «/n»;
}
</script>
<input type=»button» value=»dame names» onClick=»alert(nombres);»>
El código JavaScript anterior debe situarse al final de la página, antes de la etiqueta </BODY>, para que las imágenes estén situadas antes que él, con objeto de que sepa las imágenes que hay en la página. Si lo establecemos tal como está dentro de la cabecera, al no haberse cargado todavía las imágenes, obtendremos la variable nombres como una cadena vacía. Para solucionar esto, podemos declarar antes de la variable las imágenes de la página, mediante el constructor de objetos Image.
src: que almacena la ruta de la imagen asociada al objeto. Así, si queremos asignar la ruta de una imagen a una variable, para poder por ejemplo presentar en pantalla esta ruta, deberemos escribir:
var ruta = document.nombre_imagen.src;
y luego podemos usar esta variable desde un botón de formulario, por ejemplo:
<img name=»manzana» src=»manzana.jpg» width=»150″ height=»121″ border=»0″>
<script language= «JavaScript» type=»text/javascript»>
var ruta = document.manzana.src;
</script>
<input type=»button» value=»dame ruta» onClick=»alert(ruta);»>
Esta propiedad es fundamentalmente la usada para construir rollovers, en los que cambiamos dinámicamente su valor. Para ello, hay que establerlo siempre entre comillas, dobles o simples, ya que src trata la ruta como una cadena de texto (variable de tipo string).
width/height: que representa la anchura y la altura de la imagen asociada al objeto, y que podemos leer y cambiar de forma dinámica. Ejemplo:
<input type=»button» value= «dame altura» onClick=»alert(document.manzana.height)»>
border: que se refiere al atributo border de la imagen asociada al objeto. Para acceder a esta propiedad deberemos escribir:
document.images[indice].border
ó
document.nombre_imagen.border
Como ejemplo, vamos a cambiar dinámicamente el borde de la imagen inferior:
<input type=»button» value= «cambia borde» onClick=»document.manzana2.border=10;»>
hspace/vspace: que define el espacio horizontal o vertical de una imagen flotante respecto al texto que la rodea. El acceso a esta propiedad se logra mediante:
document.nombre_imagen.hspace
lowsrc: que fija la ruta de una imagen accesoria, generalmente una versión de menos peso en KBs de la imagen principal, que se debe cargar en pantalla mientras se recibe esta. Su sintaxis es:
document.nombre_imagen.lowsrc
prototype: propiedad muy importante desde el punto de vista del programador web, ya que permite añadir propiedades y métodos adicionales a un objeto Image, es decir, permite ampliar lo que es el objeto en sí, aumentando sus propiedades por defecto. No vamos a entrar en detalles sobre esta propiedad, común a muchos de los objetos propios de JavaScript, ya que para su uso hace falta un conocimiento profundo de este lenguaje. Pero sí decir que sirve, por ejemplo, para asignar una nueva propiedad, que vamos a llamar orden, de tipo numérico, en la que podemos guardar un orden de presentación en una ventana flotante, y mediante código permitir al usuario que seleccione una serie de imágenes de las contenidas en nuestra página. Luego, mediante esta nueva propiedad orden podemos presentarlas ordenadas en la pantalla flotante (es sólo un ejemplo). Para más información al respecto, consultar un buen manual de JavaScript avanzado.
Con esto acabamos las propiedades principales del objeto Image. Sólo añadir que las propiedades border, name y vspace no son accesibles para objetos creados mediante el constructor Image().
–
Luciano Moreno
(Dep. Diseño Web BJS Software)