Eventos para imágenes en JavaScript

El objeto Image admite solamente 3 eventos comunes a los navegadores más comunes:

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:

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, tras pasar sobre la imagen, se va de ella. Ejemplo de sintaxis:

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:

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 href=»#» porque no vamos a llamar a ninguna página, y return false para anular el efecto del enlace en si, 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 KBs, 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=»images/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, dando la ruta de su imagen asociada, se conoce también con el nombre de «precarga de imagen», ya que efectivamente se consigue con la declaración que el navegador cargue la imagen en memoria.

–

Artículo de Luciano Moreno
(Dep. Diseño Web BJS Software)

Eventos para imágenes en JavaScript

Últimas publicaciones

Temas populares

Enlaces