Rollover di immagine che si vede sul Web si verificano quando il browser sostituisce un'immagine per uno nuovo. Normalmente, l'immagine originale restituisce quando il cursore del mouse viene posizionato non è più l'elemento image. Questo effetto di rollover cattura l'attenzione degli utenti di Internet e aggiunge ulteriore interattività al tuo sito. Utilizzando JavaScript, potete modificare l'effetto e congelarlo. In questo modo la nuova immagine di rimanere quando il cursore si sposta dall'elemento image.

Istruzioni

1

Aprire il documento HTML utilizzando blocco note o un editor HTML.

2

Aggiungere questo codice alla sezione < body > del documento:

< alla href="xyz.com" onmouseover="freezeImage()" >

< img id = "mainImage" alt = "" / >

< /a >

Questo crea un link con un'immagine. Sostituire "xyz1.gif" con il nome di un'immagine sul disco rigido. Questa è l'immagine che si vedrà quando si arriva alla pagina Web. Il parametro "onmouseover" consente al browser di eseguire la funzione JavaScript "freezeImage" quando si sposta il cursore del mouse sopra l'immagine.

3

Aggiungere questo codice JavaScript alla sezione < head > del documento:

< script type = "text/javascript" >

Linee 1-2

var image1Name = "xyz1.gif";

var image2Name = "xyz2.gif";

Righe 3-4

var image1 = new Image;

var image2 = new Image;

Linee 5-6

image1.src = image1Name;

Image2.src = image2Name;

Linee 7-9

Function freezeImage() () {

var imageObject = document.getElementById("mainImage");

imageObject.src = image2Name;

}

< / script >

Linee 1-2 Archivio i nomi dei tuoi "prima" e "dopo" immagini nelle due variabili dimostrate. Sostituire "xyz1.gif" con il nome dell'immagine definito nella sezione < body >. Sostituire "xyz2.gif" con il nome dell'immagine che si desidera venga visualizzato quando si sposta il cursore del mouse sopra il link.

Linee 3-6 creano oggetti immagine e inizializzarle ai nomi che si definisce nelle linee 1-2. La funzione sulle linee 7-9 sostituisce l'immagine principale con la seconda immagine (image2Name) quando si verifica il rollover.

4

Salvare il documento e aprire Esplora risorse di Windows. Individuare il file e fare doppio clic su esso. Il tuo browser per aprire e visualizzare la pagina Web. La pagina mostrerà il collegamento che contiene la prima immagine.

5

Muovi il mouse sopra il link. La funzione JavaScript verrà eseguito e causare il collegamento per visualizzare la seconda immagine. Spostare il mouse dall'immagine, e non cambierà più.

Consigli & Avvertenze

• L'immagine è bloccata a posto perché il codice ha un evento "onmouseover" ma nessun evento "onmouseout", come fanno molte pagine Web. In questo esempio viene utilizzato un link come elemento di rollover. È possibile creare lo stesso effetto utilizzando altri elementi HTML aggiungendo il codice "onmouseover" al loro definizioni dei tag del documento < corpo > sezione.