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

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

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>
Per realizzare l'effetto, sfruttiamo la proprietà src dell'oggetto Image() di Javascript; assegniamo un identificativo ID ad ogni immagine e lo utilizziamo per richiamare il file che desideriamo, con la seguente sintassi:
ID_Immagine.src='NomeFileDesiderato.gif'

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (106.555)

:: Breve guida a jQuery (96.818)

:: Le espressioni regolari in Javascript (84.690)

:: Gestione delle stringhe in Javascript (74.154)

:: Stampare una pagina col Dhtml (42.639)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (39.785)

:: Menu orizzontale dinamico in Dhtml (36.961)

:: Gli Array in Javascript (35.690)

:: Temporizzazioni Javascript (31.211)

:: Istruzion condizionali in Javascript: if e switch (28.629)

IN EVIDENZA
DOWNLOAD