Eventos para imágenes

Eventos comunes y no comunes aceptados por el objeto Image. Trucos para utilizar otros eventos no aceptados.

El objeto Image admite sólamente 3 eventos comunes a los 3 navegadores: 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 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:

<img name="imagen1"src="images/logo.gif" onClick="alert('gracias por pulsarme')">

ejemplo de evento onClick

  • 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í)">

ejemplo de evento onmouseOver

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

<img name= "imagen1"src="images/logo.gif" onmouseOut="alert('adios, amigo')">

    ejemplo de evento onmouseOut

    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, sino 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="images/avatar.gif" width="60" height="60" border="0"></a>

ejemplo de evento en enlace

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

Autor

Luciano Moreno

Consultor, diseñador y desarrollador web en ParaRedeBJS. Especialista en usabillidad y diseño centrado en el usuario.

Compartir

Comentarios

Francisco

04/5/2004
Hola yo tengo una pregunta, se pueden utilizar 2 acciones en onMouseover? es que ya tengo una que muestra una imagen al pasar el mouse pero en el mismo link me gustaria utilizar window.status para que muestre un texto en la barra de contenido al pasar el puntero por el link, pero no funciona y no se si es porque no se puede, o orque no lo pongo como tiene que ser. Por favor si alguien me puede hechar una mano.
Un saludo

Gustavo León

17/10/2004
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!. R: Ok amigo muy interesante pero te olvidas de la tecla ENTRER que hay en el teclado, la cual crea el mismo efecto que plusar sobre el botón aceptar

abc def

17/6/2009
alfabeto
completo

Edison

18/12/2009
Eventos de imagenes
Me alegra conocer la página en especial estos conocimientos basico ayudan mucho a entender porque no funcionan algunos navegadores.

Saludos,

Edison

DaycareWeb

13/9/2010
Ayuda en un script
Hola,
Me he leido tu entrada para ver si en ella podria encontrar alguna idea que me aclarara respecto a lo que quiero lograr.
Por favor, necesito una ayuda en:
Quiero lograr mostrar/ocultar una imagen al marcar/desmarmar una casilla de verificacion. Llevo varios dias en esto y no he podido solucionarlo. He intentado muchas cosas, pero hasta ahora solo he logrado presentar la imagen oculta pero al marcar la casilla no se habilita la imagen.
En terminos de programacion escrita, te diria, que necesito:
evento 1: mostrar casilla verificacion + texto + imagen (hidden, sin href);(esto lo he logrado).
evento 2: si la casilla de verificacion es "true" mostrar evento 3 y si es "false" mostrar evento 1.
evento 3: mostrar imagen "visible" + href
Muchas gracias

Alvin

15/6/2011
debo clickear doblemente aunque programé con onclick
En una imagen programé el evento onclick. Sin embargo, recién al segundo click se activa. ¿Por qué?