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