You are here
Manejo de Imágenes con JavaScript Sin categoría 

Manejo de Imágenes con JavaScript

Manejo de Imágenes con JavaScript

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

 

 

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.

 

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++)

{

 

 

}

</script>

nombres= + document.images[i].name + “/n”;

 

<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 atributo name.

 

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;”>

 

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


Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts

Comments

Leave a Comment


*