Conoce las propiedades del objeto Image

Describimos las propiedades más interesantes de este objeto con algunos ejemplos.

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, 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 muchisimos 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 de un programador web, ya que este permite añadir propiedades y métodos adicionales a un objeto Image, es decir, nos 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 cabe 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, a través de 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 a través de 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.

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros cursos de Programación visita www.uneweb.com para más información.