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 (109.278)

:: Breve guida a jQuery (101.059)

:: Le espressioni regolari in Javascript (85.389)

:: Gestione delle stringhe in Javascript (75.895)

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

:: Stampare una pagina col Dhtml (43.144)

:: Menu orizzontale dinamico in Dhtml (37.504)

:: Gli Array in Javascript (36.314)

:: Temporizzazioni Javascript (32.044)

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

IN EVIDENZA
DOWNLOAD