Javascript

Cambiare l'immagine al passaggio del mouse

Uno dei metodi per migliorare l'aspetto grafico di una pagina web, è quella di sostituire un'immagine quando si posizione il puntatore sopra. Questa tecnica (chiamata Rollover) viene solitamente utilizzata per distinguere le immagini semplici da quelle aventi un collegamento ad un articolo oppure nei menu formati da soli immagini. Lo "script" da utilizzare è veramente banale.

Create una qualsiasi immagine


Ora all'interno del tag aggiungete dell'altro codice, in modo da renderlo così:


Analizziamo il codice:

img il tag utilizzato per la creazione delle immagini

src="http://immagini.im/immagine1.jpg" all'interno delle virgolette (" ") inserire il collegamento all'immagine che sarà visualizzata senza che il puntatore vi si trovi sopra.

onmouseover='this.src = "http://immagini.im/immagine2.jpg";' inserire tra le virgolette l'indirizzo dell'immagine da visualizzare quando il puntatore si trova sull'immagine;

onmouseout='this.src = "http://immagini.im/immagine1.jpg";' all'interno delle virgolette inserire il collegamento all'immagine che sarà visualizzata senza che il puntatore vi si trovi sopra, cioè lo stesso indirizzo inserito prima come immagine da visualizzare nel src="http://immagini.im/immagine1.jpg"

Questo è il metodo più semplice di rappresentazione dell'effetto Rollover anche se si può migliorare lo script affinché si adatti meglio nei contesti che lo utilizzano molto frequentemente a scapito della flessibilità.

Edited by Red eYe - 8/8/2009, 20:49