Animazioni con Il Mouse

Abbiamo visto nel capitolo precedente come il mouse venga utilizzato per avviare le animazioni e fermarle, il click sul link non è l'unico evento previsto in JavaScript. Comunque, la tecnica utilizzata fondamentalmente consiste nel creare un hyperlink che attraverso un comando apposito, che ad esempio controlli la pressione del tasto sinistro del mouse su di esso, ci permetta di governare il movimento dell'oggetto.

Lo script non dovrebbe essere una novità. Ci metteremo di nuovo una variabile attiva e la funzione del movimento è la copia precisa delle precedenti funzioni:

function init() {
        if (ns4) block = document.blockDiv
        if (ie4) block = blockDiv.style
        block.xpos = parseInt(block.left)
        block.active = false
}

function slide() {
        if (block.active) {
                block.xpos += 5
                block.left = block.xpos
                setTimeout("slide()",30)
        }
}

Il trucco sta nel creare l'hyperlink:

<A HREF="javascript:void(null)" onMouseDown="block.active=true; slide(); return false;" onMouseUp="block.active=false" onMouseOut="block.active=false">move</A>
La onMouseDown pone la variabile attiva a true, quindi chiama la funzione slide() la quale fa partire l'animazione. Mentre il link resta premuto non accade nulla se non il movimento, fino a quando, il rilascio dell'hyperlink fa eseguire quello che sta nello spazio funzione di onMouseUp. Nel nostro caso la variabile attiva viene posta a false la qual cosa ferma il movimento.

La onMouseOut pone anche essa la variabile attiva a false, ma per ragioni di sicurezza. Ho scoperto che se voi muovete il mouse fuori dal link e quindi rilasciate questa azione non fermerà il movimento - è evidente che manca qualcosa - quello che manca è l'esecuzione di un evento di mouse che ripristini le condizioni primitive. Se voi includete onMouseOut questa coprirà tutte le eventualità e potremo cosí fermare il blocco in movimento.

Cliccate qui  per vedere questo esempio

Home Prossima Lezione: Cambiare le Immagini
copyright 1998 Dan Steinman