August 31
rollover di immagini che si vedono sul Web si verificano quando il browser sostituisce un'immagine per uno nuovo. Normalmente, l'immagine originale ritorna quando il cursore del mouse non è più passa sopra l'elemento image. Questo effetto rollover cattura l'attenzione degli utenti di Internet e aggiunge ulteriore interattività al tuo sito. Utilizzando JavaScript, è possibile modificare l'effetto e congelarlo. Ciò farà sì che la nuova immagine di rimanere quando il cursore si sposta lontano da elementi dell'immagine.
1 Aprire il documento HTML utilizzando il blocco note o un editor HTML.
2 Aggiungere questo codice alla sezione <body> del documento:
<a href="xyz.com" onmouseover="freezeImage()">
<Img alt id = "Mainimage" = "" />
</a>
Questo crea un collegamento che ha 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 "onmouseover" parametro fa sì che il browser di eseguire il "freezeImage" funzione JavaScript 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";
// Linee 3-4
var = image1 nuova immagine ();
var = image2 nuova immagine ();
// Linee 5-6
image1.src = image1Name;
image2.src = image2Name;
// Linee 7-9
Funzione freezeImage () {
var imageobject = document.getElementById ( "Mainimage");
imageObject.src = image2Name;
}
</ Script>
Le linee 1-2 memorizzare i nomi della tua "prima" e "dopo" le immagini nei due variabili indicate. Sostituire "xyz1.gif" con il nome dell'immagine definita nella sezione <body>. Sostituire "xyz2.gif" con il nome dell'immagine che si desidera visualizzare quando un cursore del mouse si sposta sopra il link.
Linee 3-6 creano oggetti immagine e li inizializzare ai nomi definiti nelle righe 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. Individuare il file e fare doppio clic su di esso. Il tuo browser si aprirà e visualizzare la pagina Web. La pagina mostrerà il link che contiene la prima immagine.
5 Muovi il mouse sopra il link. La funzione JavaScript verrà eseguito e causare il link per visualizzare la seconda immagine. Muovi il mouse lontano dal immagine, e non cambierà più.