Uneweb Instituto: Cónoce las 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:

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, que veremos en el capítulo siguiente.

Como resultado de esta acción, sólo aparecerán aquellas imágenes a las que hemos nombrado por medio del atributoname.

También observarás, si pulsas el botón anterior, que en la ventana que aparece quedan muchos huecos vacíos; éstos son debidos a todas las imágenes de la página por encima del código a las que no hemos asignado la propiedad name.

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="dinosaurio" src="images/avatar.gif" width="60" height="60" border="0">

<script language= "JavaScript" type="text/javascript">
var ruta = document.dinosaurio.src;
</script>
<input type="button" value="dame ruta" onClick="alert(ruta);">

Esta propiedad es fundamentalmente usada para construir rollovers, en los que cambiamos dinámicamente su valor. Para ello, hay que establecerlo siempre entre comillas, dobles o simples, ya que src trata la ruta como una cadena de texto (variable de tipo string).
width / height, que representan la anchura y la altura de la imagen asociada al objeto, y que podemos leer (en los 3 navegadores comunes) y cambiar (sólo en Explorer y Nestcape 6x) de forma dinámica. Ejemplo:

<input type="button" value= "dame altura" onClick="alert(document.dinosaurio.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 o 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.icono.border=10;">

Nota: esto sólo funcionará en Internet Explorer y en Nestcape 6x; para las versiones 4x de Nestcape esta propiedad es de sólo lectura, por lo que podemos obtener su valor, pero no cambiarlo.
hspace / vspace, que definen 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 Ks de la imagen principal, que se debe cargar en pantalla mientras se recibe ésta. 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 si 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.
complete: propiedad del objeto Image de tipo booleano, cierta cuando la imagen se ha acabado de cargar en memoria, y falsa en caso contrario. Sólo es soportada por Nestcape Navigator, por lo que no se debe usar, en vistas a la compatibilidad.

Con esto acabamos las propiedades principales del objeto Image. Sólo añadir que las propiedades border, name y vspaceno son accesibles para objetos creados mediante el constructor Image( ). Este método constructor de nuevos objetos Image lo vamos a estudiar a continuación, junto con los principales eventos soportados por una imagen.