Todo sobre imágenes en 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), 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 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 este, basta con escribir:

document.images.length.

Ejemplos:

– Acceso a la propiedad WIDTH de la imagen bandera:

document.images.bandera.width

document.bandera.width

– Acceso a la propiedad SRC de la imagen bandera:

document.images[1].src

Ejemplo práctico: vamos a mostrar en pantalla la anchura de la imagen siguiente:

que hemos introducido en la página mediante:

y para ello escribimos:

que podemos ver en acción pulsando el botón creado:

De esta forma podemos acceder y/o cambiar cada una de las propiedades de una imagen. Por ejemplo, si queremos cambiar la anchura de la imagen anterior basta escribir:

document.logotipo.width="500"

que podéis comprobar pulsando el siguiente botón:

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.

Propiedades del objeto Image.-

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:

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.

En nuestro caso, sólo aparece en la ventana de resultados los nombres de la imagen del logo de la página y del punto rojo que he usado para crear la tabla que lo contiene, ya que estas son las únicas por encima a las que hemos 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:

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:

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 abtener 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 pantalle 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 constructos 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.

Eventos para imágenes.-

El objeto Image admite sólamente 3 eventos comunes a los 3 navegadores comunes: Internet Explorer, Nestcape Navigator 4x y Nestcape Navigator 6x. Estos son:

onAbort: que se activa cuando se aborta la carga de una imagen en pantalla, por ejemplo porque el usuario ha pulsado la opción "detener" (stop) en la barra superior de iconos del navegador. Ejemplo de sintaxis:

onError: que se dispara cuando por algún motivo externo no se ha podido realizar la carga de la imagen en pantalla, por ejemplo porque la ruta de la misma esté mal especificada. Ejemplo de sintaxis:

onLoad: que se activa cuando se ha acabado de cargar la imagen y se presenta en pantalla. Ejemplo de sintaxis:

Pero además de estos eventos comunes, las imágenes soportan otra serie de eventos que si bien no son soportados por Nestcape 4x, sí lo son por Internet Explorer y por Nestcape 6x. Por este motivo, sólo es conveniente su uso cuando van a ejecutar una acción que no sea fundamental ni para la presentación ni para la ejecución de código de la página. Esperemos a que pronto se estandarice el uso de Nestcape 6x y se deje a un lado las versiones 4x, y entonces podremos aplicar estos eventos con compatibilidad total. Estos eventos adicionales son:

onClick: que se activa cuando se hace click con el puntero del ratón sobre la imagen. Ejemplo de sintaxis:

onmouseOver: que se activa cuando se el puntero del ratón pasa sobre la imagen. Ejemplo de sintaxis:

onmouseOut: que se activa cuando el puntero del ratón, trás pasar sobre la imagen, se va de ella. Ejemplo de sintaxis:

Nota cómo he situado la imagen anterior en el lateral izquierdo. Si la centro, como están las anteriores, y coincide que el usuario ha desplazado la página con la barra lateral de scroll de tal forma que la imagen queda centrada también verticalmente, se produce un curioso y molesto efecto. Al irse el cursor de la imagen se lanza la pantalla de alerta, con lo que tienes que pulsar el botón aceptar de la misma para que se cierre. Pero al hacer esto, cuando se cierra, el cursor se encuentra de nuevo sobre la imagen, con lo que si lo quitas de encima se repite el proceso, y así sucesívamente. La única solución es cerrar la ventana de alerta pulsando la cruz de la esquina superior derecha de la misma, pero si el usuario no cáe en ello, se verá obligado a cerrar la ventana del navegador mediante el Administrador de Tareas. ¡Cuidado con estos ciclos indeseados!.

También podríamos aplicar otros eventos de este tipo, como onmouseUp, ondblClick, etc., pero no suelen ser útiles, causando normalmente más problemas que ventajas.

Compatibilizando eventos.-

Hemos visto que las imágenes sólo admiten como eventos estándares onLoad, onError y onAbort, pero la mayoría de las veces nosotros necesitamos elementos que soporten todo tipo de eventos, como onClick, onmouseOver, etc., y en todo tipo de navegadores.

Podemos, con un poco de imaginación, utilizar otros elementos de JavaScript para conseguir esto. Así, sabemos que el objeto Link sí admite todo tipo de eventos, por lo que podemos usarlo como herramienta auxiliar para dotar a las imágenes de las funcionalidades que necesitamos.

La idea es muy simple: basta situar la imagen que deseamos que soporte los eventos dentro de un enlace simple de HTML, es decir, situando la etiqueta <IMAGE> dentro de la pareja de etiquetas < A HREF.....>...</A>, y entonces establecer el evento necesario NO en la imagen, si no en el enlace. Como ejemplo práctico vamos a introducir una imagen que soporte de forma general el evento onClick:

Nota lo siguiente:

1) si sitúas el cursor sobre la imagen verás que éste se transforma en la mano típica de los enlaces. Lógico, ya que hemos transformado la imagen en uno de ellos. Si deseas eliminar este efecto, basta con asignar al enlace un estilo para el cursor, dejando este como default:

pero ten en cuenta que esto sólo será válido para Internet Explorer y para Nestcape 6x. Las versiones 4x de este último navegador no soportan el estilo en cursores, por lo que en ellos siempre aparacerá la mano.

2) Ojo con el atributo border. Debes ponerlo siempre, igualándolo a cero, ya que si no se verá un recuadro azul alrededor de la imagen, el típico de todos los enlaces.

3) Hemos escrito a href="#" porque no vamos a llamar a ninguna página, y return false para anular el efecto del enlace en sí, ya que sólo queremos que se ejecute el evento, no la llamada del enlace.

Por lo demás este truco es totálmente compatible, y podemos desde el evento del enlace ejecutar código JavaScript o llamar a una función previamente definida.

El constructor de objetos Image.-

El objeto Image posee en JavaScript un método constructor, de tal forma que podemos declarar con él un objeto de este tipo al principio de nuestra página, dentro de la cabecera de la misma.

La sintaxis para usar este constructor es la siguiente:

nombre_imagen = new Image (width,height);

donde los parámetros width y height corresponden a los atributos análogos de la imagen definida. Si no especificamos estos parámetros, con la declaración del constructor tendremos ya creado el nuevo objeto Image, pero el navegador no sabrá el tamaño que va a tener la imagen asociada. No obstante, no suele ser necesario establecer estos parámetros, por lo siguiente.

El navegador no sabe tampoco con la declaración anterior qué imagen en concreto es la asociada al objeto, por lo que no podrá cargarla en memoria, y si nos referimos a ella para hacer que aparezca dinámicamente se producirá un error. Para evitar esto, la declaración del objeto se debe acompañar de otra en la que establecemos qué imagen en concreto es la asociada al objeto, y esto se hace con la escritura:

nombre_imagen = new Image ( );
nombre_imagen.src = "ruta_imagen";

Y con esto el navegador ya sabe que hemos declarado un nuevo objeto imagen y sabe también qué imagen en concreto es la asociada al objeto, por lo que conoce su peso en Ks, pudiendo cargarla en memoria y tenerla así disponible para poder usarla cuando queramos. Si además hemos declarado su tamaño mediante los parámetros width y height, ya tiene todos los datos que definen al nuevo objeto. Ejemplo de declaración completa:

logotipo = new Image(249,28);
logotipo.src="/wp-content/uploads/archivos/art79a/logo.gif";

La declaración de los objetos Image que va a haber en nuestra página es muy importante, sobre todo en el caso de que en ella vayamos a cambiar dinámicamente la ruta de alguna de las imágenes inicialmente presentes en el BODY, como ocurre con los famosos rollovers, ya que si no hemos declarado en la cabecera el objeto Image correspondiente a la nueva imagen a pintar en pantalla, con su ruta correcta, el navegador no sabrá a qué nos referimos, con lo que nos dará el típico error de JavaScript "document.nombre_imagen no es un objeto".

Declarar una objeto Image dentro del HEAD de la página, dándo la ruta de su imagen asociada, se conoce también con el nombre de Precarga de imagen, ya que efectívamente se consigue con la declaración que el navegador cargue la imagen en memoria.

Aplicación práctica - Rollover simple.-

Vamos a ver ahora algunas de las aplicaciones más comunes del lenguaje JavaScript al tratamiento de imágenes, y sin duda la más conocida de ellas es el efecto conocido como rollover, en el que al pasar el cursor sobre una o más imágenes de nuestra página, éstas cambian dinámicamente, apareciendo una nueva imagen. Posteriormente, cuando el cursor se va de esta, el sistema vuelve a su estado inicial.

Vamos a empezar con un rollover simple, de una sóla imagen, ya que con él podremos explicar con claridad las bases teóricas de la construcción de este tipo de efectos.

Tenemos pués una imagen en nuestra pantalla, y lo primero que deseamos en que al pasar el cursor sobre ella pase algo, pero hemos visto que el objeto Image no admite de forma estándar el evento que necesitamos, onmouseOver. Para solucionar esto hemos visto en el capítulo anterior que podemos recurrir a situar nuestra imagen dentro de un enlace, ya que este sí admite el evento que necesitamos.

Por lo tanto, situamos la imagen, con el atributo border igualado a 0, dentro de un enlace, al que vamos a dejar el cursor estándar, ya que normalmente los rollover se usan para menús, y en estos la pulsación debe llevar a una nueva página, por lo que con el cursor en forma de mano el usuario sabrá que eso es un enlace. No obstante, en el ejemplo que vamos a construir no vamos a apuntar a ninguna página en concreto, para no perder la atención, así que vamos a llamar a la página # (que no es ninguna), y en el evento onClick añadiremos return false.

¿Qué ponemos dentro del evento onmouseOver del enlace?. Inicialmente, vamos a acceder desde él a la propiedad src de la imagen que contiene, y vamos a cambiar esta ruta, de forma que la imagen, aún llamándose igual, apunte a otro fichero gráfico, con lo que el cambio será efectivo. Para ello necesitamos haber asignado un name a la imagen. El código que necesitamos es pués:

que nos da:

Bien, ya nos cambia la imagen, pero....¿cómo hacemos que se vuelva a la original cuando el cursor deja la nueva?. Muy facil, usando el evento onmouseOut de forma análoga a como hemos usado onmouseOver:

¡Qué bonito!. Pero hay un problema, y gordo. Cuando se activa el evento onmouseOver nuestro código llama a la imagen activa avatar2.gif, pero esta imagen no está cargada en la memoria caché del navegador, por lo que éste necesita hacer una nueva petición HTTP al servidor para pedírsela, cargarla luego en memoria y por último mostrarla en pantalla. Resultado de todo esto: hay un periodo de tiempo en el que la imagen inicial desaparece y se muestra en su lugar un recuadro vacío. ¿Cómo podemos solucionar esto?.

Fácil, amigo. Basta con precargar la imagen activa antes de que se ejecute el código del evento, ya que así el navegador la tendrá disponible en su caché y el proceso de cambio de imágenes será instantáneo. Para precargar una imagen debemos usar el método constructor de objetos Image en la cabecera de nuestra página, y en él debemos especificar tanto el tamaño de la imagen que deseamos cargar como la ruta de la misma. Nuestro código queda:

y su resultado es el que sigue:

También podemos crear un rollover compuesto en el que, además del efecto que ya hemos obtenido, se presente una nueva imagen si el usuario hace click sobre la activada. Para ello sólo es necesario precargar otra imagen y acceder de nuevo a la propiedad src, esta vez mediante el evento onClick.

Pero para ello, esta vez vamos a definir unas cuantas funciones, una para cada evento, en la cabecera de la página, y vamos a llamarlas con los eventos. Examina el siguiente código:

cuyo resultado es el que sigue:

Todo sobre imágenes en JavaScript

Contenido relacionado

¿Cómo saber si un número es par o impar con PHP?

¿Cómo ocultar la insignia de reCAPTCHA v3 en un sitio web?