Gdesign.it :: Come progettare siti web accessibili ed efficaci ::


Home » How To » Come realizzare un rollover di immagini

Rollover

di GDesign, 11 Dicembre 2002

Versione StampabileDownload in pdf


I rollover sono protocolli che consentono una maggiore personalizzazione del design di una pagina web rispetto al codice Html standard. Con l'utilizzo dei browser web sono state introdotte alcune convenzioni per indicare che un testo o un'immagine sono sensibili; ne sono un chiaro esempio il testo sottolineato (utilizzato per indicare un collegamento ipertestuale) e l'aspetto del puntatore del mouse che diventa a forma di mano quando si passa sopra un elemento sensibile. I rollover sono entrati a far parte di queste convezioni; infatti, quando passiamo il nostro puntatore sopra un'immagine e questa cambia aspetto siamo portati a pensare che l'immagine sia sensibile e quindi "cliccabile".

In questo articolo vedremo quali sono i passi da fare per creare un rollover di immagini nelle nostre pagine web. Per essere più chiari faremo un esempio e alla fine dell'articolo ne vedremo il risultato.

Innanzitutto bisogna realizzare le immagini per ogni stato del rollover con un qualunque programma di grafica. Il nostro esempio è costituito da quattro immagini così composte:


home-off home-on
home-off.gif home-on.gif
info-off info-on
info-off.gif info-on.gif

La denominazione usata per le immagini non è casuale; infatti una volta stabilito il nome dell'immagine abbiamo aggiunto "-on" per l'immagine che comparirà quando il puntatore del mouse ci passa sopra e "-off" per l'immagine a riposo.
Questa convenzione ci consente di tenere più facilmente traccia delle immagini e delle loro posizioni e ci torna molto utile quando si realizza un rollover con molte immagini (come nel caso del menu di navigazione laterale di questo sito).

Nella creazione delle immagini per questo tipo di rollover, è necessario prestare attenzione ad un'altra cosa molto importante: le dimensioni delle due versioni (on e off) della stessa immagine devono essere uguali.

Adesso che abbiamo le immagini passiamo al codice javascript da utilizzare. Non ci occuperemo di spiegare il codice javascript riga per riga perché ciò avrebbe allungato di molto questo articolo e fondamentalmente perché non riteniamo che sia strettamente necessario. La cosa più importante è sapere che questo codice funziona correttamente con le più diffuse versioni dei browser web; noi lo abbiamo testato e vi possiamo assicurare il corretto funzionamento con diverse versioni (almeno quelle che hanno meno di 2 anni di vita) di Internet Explore, Netscape Navigator e Opera. Vi basta sapere che questo codice funziona anche con Netscape Navigator 4.72 che per tutti gli sviluppatori di siti web è un "nemico molto ostile".

Il codice javascript lo trovate in questo file: rollover.js, e lo dovete inserire nelle vostre pagine tra <HEAD> e </HEAD> secondo la sintassi:

<SCRIPT language="JavaScript" src="percorsofile/rollover.js"></SCRIPT>

Se preferite, potete copiare l’intero codice contenuto nel file rollover.js ed incollarlo nelle vostre pagine web sempre tra <HEAD> e <HEAD>, qui:

<SCRIPT language="JavaScript">Incollare codice</SCRIPT>

I due procedimenti sono identici e portano allo stesso risultato, quindi scegliete voi quale utilizzare.

Fatto questo, passiamo ad inserire nel tag <BODY> il gestore di eventi "onLoad" che ci permette di richiamare la funzione per il preload delle immagini che vengono attivate al passaggio del mouse. Nel nostro esempio la sintassi è:

<BODY onLoad="MM_preloadImages('img/home-on.gif','img/info-on.gif')">

Noi per comodità abbiamo inserito le nostre immagini nella cartella "img", ma voi potete inserirle anche da un'altra parte, ricordandovi di scrivere l'esatto url in BODY onLoad.

Siamo giunti quasi alla fine, non ci resta che inserire l'immagine con il collegamento ipertestuale secondo al sintassi:

<A HREF="url a cui punta l'immagine" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nome immagine','','percorso_immagine-on',1)"><IMG name="nomeimmagine" src="percorso_immagine-off" width="larghezza" height="altezza" border="0"></A>

In particolare, nel nostro esempio, la sintassi per l’immagine home è:

<A HREF="http://www.gdesign.it" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','img/home-on.gif',1)"><IMG name="home" src="img/home-off.gif" width="62" height="28" border="0"></A>

e per l’immagine info:

<A HREF="malto:info@gdesign.it" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('info','','img/info-on.gif',1)"><IMG name="info" src="img/info-off.gif" width="62" height="28" border="0"></A>

Il nostro lavoro è finito, e qui sotto possiamo vedere il risultato:

Home Info

Adesso vi possiamo svelare che il procedimento illustrato per creare il rollover è quello utilizzato da Macromedia Dreamweaver MX. Quindi, se siete in possesso di questo software, avrete bisogno di preparare soltanto le immagini nei loro due stati e tramite un apposito menu potrete realizzare il rollover senza bisogno di scrivere alcun codice. Anche i programmi di grafica come ImageReady (componente di Adobe Photohop) e Macromedia Fireworks sono in grado di realizzare rollover di immagini (codice compreso) e nessuno vi vieta di utilizzarli. Siamo convinti, però, che la lettura di questo articolo vi tornerà d'aiuto per capire come effettivamente funzionano i rollover di immagini, anche nel caso in cui sarà il vostro software a compilare il codice per voi.

Scarica adesso l'esempio di rollover che abbiamo realizzato con tutti i file necessari.

^Top

Dai un voto a questo articolo:   HITS: 155 | VOTI: | MEDIA VOTI:     

Home:: Html:: Principi:: How To:: Download:: Tips:: Link:: Collabora:: Partners:: News&Updates:: Contatto:: Info

© 2001 - 2006 Giuseppe Di Carlo :: Riproduzione vietata ::

Utenti on line: 3