Si utilizamos de manera apropiada los links, los podremos usar para producir animaciones. Por ejemplo, podremos mover la bandera pulsando un link y pararla desde que lo soltemos.

Las funciones necesarias son prácticamente iguales que las vistas hasta ahora. Adicionalmente, necesitamos en esta ocasión una variable booleana pulsado, que nos indica en todo momento si el link está pulsado. Esta variable, evidentemente, debe estar inicializada a falso.

Ahora, la función que produce la animación, va a hacer una comprobación nada más comenzar su ejecución: animará la bandera sólo si pulsado está a verdadero.

Lo más importante se hace cuando se declara el link:

	<a href="javascript:void(null)" onMouseDown="pulsado=true; Animar();"
	 onMouseUp="pulsado=false" onMouseOut="pulsado=false">Mover bandera</A>

La explicación es bien sencilla: ¿cuándo comienza a moverse la bandera? Pues cuando se pulse el link (onMouseDown). En ese momento, colocamos pulsado a verdadero y llamamos a Animar. Hay dos motivos por los que la bandera puede dejar de moverse: que el usuario deje de pulsar el link (onMouseUp) o que, aun teniendo el link pulsado, mueva el ratón y lo aleje del link (onMouseOut). En ambos casos, lo único que hay que hacer es colocar pulsado a falso. Con esto, conseguimos que la siguiente vez que se entre a la función Animar, salga sin ejecutar nada, por la comprobación que se hace dentro.

NOTA: En el Internet Explorer, la única manera de parar la animación, es soltando el botón del ratón. Aunque dejemos de señalar al link, la bandera sigue moviéndose.

Ejemplo

Otra opción que se puede tomar es la de tener dos links, uno para comenzar la animación, y otro para detenerla. Para este caso, lo único que cambiaría serían los links, ya que tendríamos dos:

	<a href="javascript:void(null)" onMouseDown="pulsado=true; Animar();">Mover Bandera</A>

	<a href="javascript:void(null)" onMouseDown="pulsado=false;">Parar Bandera</A>

Ejemplo

- Versión imprimible de este documento
- Enviar por e-mail este documento