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:
<img
name="imagen1" src="images/logo.gif"... onAbort="alert('ha
cancelado la carga de la imagen')">
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:
<img
name="imagen1" src="images/logo.gif"... onError="alert('la
imagen del logotipo no se ha podido cargar')">
onLoad:
que se activa cuando se ha acabado de cargar la imagen y se presenta
en pantalla. Ejemplo de sintaxis:
<img
name="imagen1" src="images/logo.gif"... onLoad="alert('ya
se ha cargado la imagen del logotipo')">
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 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:
<img
name="imagen1" src="images/logo.gif"...
onClick="alert('gracias por pulsarme')">
onmouseOver:
que se activa cuando se el puntero del ratón pasa sobre la imagen.
Ejemplo de sintaxis:
<img
name="imagen1" src="images/logo.gif"... onmouseOver="alert('gracias
por pasar sobre mí)">
onmouseOut:
que se activa cuando el puntero del ratón, tras pasar sobre la
imagen, se va de ella. Ejemplo de sintaxis:
<img
name="imagen1" src="images/logo.gif"... onmouseOut="alert('adios,
amigo')">
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:
<a
href="#" onClick="alert('que evento más bonito');return
false;"><img src="manzana.jpg" width="150"
height="121" border="0"></a>
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:
<a
href="#" ... style="cursor:default;"><img
src=...></a>
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 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="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, 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.
Artículo
de Luciano Moreno (Dep. Diseño Web BJS Software)
