Cambiare il puntatore di un link al passaggio del mouse con Javascript

Autore: Luca Ruggiero | Tell a Friend Corso Java Impara a programmare col linguaggio OOP della Sun. Corso Javascript e DHTML Impara a creare controlli ed animazioni! Corso Web Design Disegno di siti Web con HTML, CSS e Dynamic HTML.

Molti menu, pur non particolarmente elaborati, offrono gradevoli effetti visivi sfruttando semplici effetti messi a disposizione dal Dhtml, ad esempio per giocare con le immagini. Il menu che andiamo a creare è formato da una serie di link disposti verticalmente, accompagnati da un puntatore che precede la voce rappresentato da una piccola immagine GIF di, che chiameremo puntatore_1.gif; al passaggio del mouse su di un link, il puntatore si trasformerà, ad esempio cambiando colore: allo scopo utilizzeremo un'altra immagine GIF, che chiameremo puntatore_2.gif.

Di seguito un codice di esempio funzionante:

<div>

<img src="puntatore_1.gif" id="link_1">
<a href="#" onMouseOver="link_1.src='puntatore_2.gif'" onMouseOut="link_1.src='puntatore_1.gif'">Link 1</a>
<br>

<img src="puntatore_1.gif" id="link_2">
<a href="#" onMouseOver="link_2.src='puntatore_2.gif'" onMouseOut="link_2.src='puntatore_1.gif'">Link 2</a>
<br>

<img src="puntatore_1.gif" id="link_3">
<a href="#" onMouseOver="link_3.src='puntatore_2.gif'" onMouseOut="link_3.src='puntatore_1.gif'">Link 3</a>
<br>

</div>

ID_Immagine.src='NomeFileDesiderato.gif'