REDAZIONE

In questo articolo vi mostriamo un metodo per migliorare l'aspetto grafico del blog, come sostituire un'immagine quando si posizione il puntatore sopra di essa. Questa tecnica è chiamata rollover e potete utilizzarla per distinguere le immagini che hanno un collegamento ad un articolo, nei menu formati da immagini oppure per semplici scherzi divertenti, come questo.

Lo script da utilizzare è molto semplice. La base è la stessa che si utilizza per inserire una immagine con link in un post o nelle barre laterali di navigazione.

HTML

 <a href=”http://pagina_da_aprire.it”><img src="http://immagine1.jpg"></a>     

A questa riga di codice aggiungiamo alcuni parametri.

HTML

 <a href=”http://pagina_da_aprire.it”><img src="http:// immagine1.jpg" 
 onmouseover='this.src = "http:// immagine2.jpg";' 
 onmouseout="this.src='http:// immagine1.jpg';"></a>     

Dove:

• a è il tag utilizzato per la creazione dei link;
• href=”http://pagina_da_aprire.it” contiene, all'interno delle virgolette, l’indirizzo della pagina che si apre cliccando sopra l’immagine;
• img è il tag utilizzato per la creazione delle immagini;
• src="http:// immagine1.jpg" contiene, all'interno delle virgolette, l’indirizzo della prima immagine da visualizzare;
• onmouseover='this.src = "http:// immagine2.jpg";' contiene, all’interno delle virgolette, l’indirizzo dell’immagine che si vuole mostrare al passaggio del mouse;
• onmouseout='this.src = "http:// immagine1.jpg";' contiene, all’interno delle virgolette, l’indirizzo della prima immagine che si era voluto mostrare.

Questo è il metodo più semplice per creare un effetto rollover anche se esistono script che possono adattare meglio e rendere più flessibile l’effetto all’interno di un contesto.