En este post trabajaremos tres de los eventos más utilizados: onclick, ondblclick, onmouseover; que se corresponden con los eventos clic, doble clic y pasar el ratón por encima de ...
Para ilustrar el funcionamiento de estos eventos en JavaScript crearemos una sencilla página web con tres imágenes, cada una de ellas respondiendo a uno de estos eventos.
Primeramente creamos la página con las imágenes:
<html> <head> <title></title> <script type="text/javascript"> </script> </head> <body> <img src="http://.../libro.jpg"> <img src="http://.../cuaderno.jpg"> <img src="http://.../sacapuntas.jpg"> </body> </html>
Para que una imagen responda a un evento, debe incluir dentro de su etiqueta el nombre del evento y el código que ha de ejecutar cuando aquel se dispare. Así, en nuestro ejemplo, haremos que la primera imagen del libro responda el evento onclick mostrando el mensaje: "Has hecho clic sobre un libro" con el siguiente código:
| <img src="http://.../libro.jpg" onclick="alert('Has hecho clic sobre un libro')"> |
La segunda imagen responderá al evento doble clic (ondblclick):
| <img src="http://.../cuaderno.jpg" ondblclick="alert('Has hecho doble clic sobre un cuaderno')"> |
Y la última imagen responderá al evento de sobrevolar el ratón (onmousevoer):
| <img src="http://.../sacapuntas.jpg" onmouseoverclick="alert('Has pasado el ratón por encima de un sacapuntas')"> |
