Corso di JavaScript

L’Effetto Rollover

 

Uno degli effetti grafici più usati dai WebDesigner in Javascript, sia per facilità di realizzazione che per utilità è senza dubbio l’Effetto Rollover sulle immagini.
Questo effetto consiste nella sostituzione di una immagine di tipo GIF o JPG, al passaggio del puntatore del mouse sull’oggetto, creando una piccola animazione o evidenziazione dello stesso, che non ha tanto lo scopo di abbellire il documento quanto il fine di catturare l’attenzione dell’utente e di dirigerlo, eventualmente, verso altri documenti.

Esistono svariati modi di realizzare un ‘Effetto Rollover’, tra questi ho scelto il più semplice e il più funzionale, integrandosi facilmente con il codice HTML.
 
Nel linguaggio HTML le immagini vengono inserite con il TAG <IMG>, queste possono essere gestite molto facilmente attraverso il linguaggio Javascript.
Vediamo in che modo:

Al  seguente TAG HTML <IMG>:

<IMG src=”immagine1.jpg” name=”miaImmagine”>

viene corrisposto automaticamente il seguente Oggetto:

window.document.miaImmagine;

Prendiamo ad esempio questa figura rappresentante:



Un browser (window), nel quale documento (document) è stata inserita una immagine (miaImmagine).

A questo punto osservate la riga di codice Javascript che segue:

window.document.miaImmagine.src=”immagine2.jpg”;

Eseguita questa istruzione, viene sostituita la prima immagine (immagine1.jpg) già caricata in precedenza con il tag <IMG>, con la seconda immagine (immagine2.jpg).
Ciò avviene tramite src, che non è un metodo ma una proprietà appartenente all’immagine (miaImmagine), questa sostituzione viene definita dinamica, cioè senza che venga contattato nuovamente l’host e senza che venga nuovamente caricato il documento con i suoi oggetti.

Per praticità (e senza alcun tipo di problema) potete sottintendere nell’ordine, gli oggetti window e document, semplificando la precedente riga di codice in questo modo:

miaImmagine.src=”immagine2.jpg”;

A questo punto dobbiamo scegliere gli eventi che attiveranno la sostituzione ed il ripristino delle immagini tramite il puntatore del mouse.

Gli eventi da controllare sono i seguenti:

Se il puntatore del mouse è sopra l’oggetto miaImmagine (evento onMouseOver), sostituisci il contenuto dell’oggetto con un’altra immagine specificata.

Se il puntatore del mouse è fuori dall’immagine miaImmagine (evento onMouseOut), sostituisci il contenuto dell’oggetto con l’immagine caricata precedentemente.

Ad ogni evento si associa una porzione di codice da eseguire, con queste istruzioni viene attivato l’Effetto Rollover.

Vediamo il codice:


<HEAD>
</HEAD>

<BODY bgcolor=black>
 <a href="#"
    onmouseover="miaImmagine.src='over.jpg';"
    onmouseout="miaImmagine.src='out.jpg';">
    <img name="miaImmagine"
         src="out.jpg"
         alt="Il puntatore del mouse è sopra l'immagine!"
         border="0">
    </img>
 </a>
</BODY>


Per visualizzare questo script:
Clicca qui:


Avrete certamente notato che in questo esempio non è presente la riga di codice:
<SCRIPT LANGUAGE="JavaScript">

Vi sottolineo nuovamente che le istruzioni Javascript, inserite tra i doppi apici, sono state associate agli eventi:

onmouseover="miaImmagine.src='over.jpg';"
onmouseout="miaImmagine.src='out.jpg';"


i quali sono stati inseriti all’interno del TAG <A> (anchor) unitamente all’oggetto IMG.
Questa è una testimonianza della sinergia esistente tra il linguaggio Javascript ed il linguaggio HTML.

Per una buona riuscita dell’effetto vi consiglio di utilizzare immagini che non siano molto pesanti da caricare e che soprattutto abbiano tra loro le medesime caratteristiche tecniche.

Se non avete esperienza nell’utilizzo dei programmi di grafica vi consiglio di cercare attraverso i motori di ricerca le immagini e i bottoni che vengono offerti in rete gratuitamente, selezionando i più adattabili al vostro sito.

In genere è consigliabile effettuare un precaricamento delle immagini, ma questa importante operazione la vedremo in dettaglio nella prossima lezione, conoscendo l’Oggetto Image.

 

Torna all'indice Generale del corso di Corso di JavaScript di Software Planet