El
objeto Image posée 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>
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.
En
nuestro caso, no aparece ningún resultado al pulsar el botón,
ya que no hay ninguna imagen por encima de ese código al que
hallamos asignado el atributo name.
También
observarás, si pulsas el botón anterior, que en la ventana
que aparece quedan muchos huecos vacíos; 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:
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 (en los 3 navegadores
comunes) y cambiar (sólo en Explorer y Nestcape 6x) de forma
dinámica. Ejemplo:
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 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 Ks 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.
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 vspace no son accesibles
para objetos creados mediante el constructor Image().
Artículo
de Luciano Moreno (Dep. Diseño Web BJS Software)
