August 1
Un'immagine rollover, spesso definito semplicemente come un rollover, è un elemento su un sito web che aggiunge bagliore interattivo. Quando un visitatore Web passa il suo cursore del mouse un'immagine di rollover, l'immagine cambia sopra. Questo consente ai web designer di fornire indizi di navigazione visiva rendendo pulsanti cliccabili cambiamento di colore quando il mouse su. immagini rollover creano anche un senso di movimento e di azione su un sito web altrimenti statica.
1 Creare due immagini della stessa dimensione. La prima immagine sarà quella visitatori vedere quando in primo luogo arrivano al sito. Questa è l'immagine "off", l'immagine che viene visualizzata quando un visitatore non viene passaggio del mouse su di esso. La seconda immagine sarà il "sopra" l'immagine, l'immagine che viene visualizzata quando qualcuno Mouses sull'immagine "off".
2 Aggiungere il codice sottostante nel codice HTML del tuo sito web. Questo codice causerà l'azione del ribaltamento, il cambiamento di un'immagine ad un'altra. Aprire il file HTML in Blocco note o il vostro editor di testo preferito e inserire il codice nel corpo del documento. Non apportare modifiche al codice.
<Script type = "text / javascript">
<! -
// Copyright 1999 Idocs, Inc. http://www.idocs.com/tags/
// Distribuire liberamente questo script, ma si prega di tenere presente
// Avviso con il codice.
var rollOverArr = new Array ();
Funzione setrollover (OverImgSrc, pageImageName)
{
se il ritorno (document.images!);
if (pageImageName == null)
pageImageName = document.images[document.images.length-1].name;
rollOverArr [pageImageName] = new Object;
rollOverArr [pageImageName] .overImg = nuova immagine;
rollOverArr [pageImageName] .overImg.src = OverImgSrc;
}
funzione di rollover (pageImageName)
{
se il ritorno (document.images!);
se il ritorno (rollOverArr [pageImageName]!);
if (! rollOverArr [pageImageName] .outImg)
{
rollOverArr [pageImageName] .outImg = nuova immagine;
rollOverArr [pageImageName] .outImg.src = document.images [pageImageName] .src;
}
document.images [pageImageName] .src = rollOverArr [pageImageName] .overImg.src;
}
funzione di rollout (pageImageName)
{
se il ritorno (document.images!);
se il ritorno (rollOverArr [pageImageName]!);
document.images [pageImageName] .src = rollOverArr [pageImageName] .outImg.src;
}
// ->
</ SCRIPT>
3 Successivamente, aggiungere il codice che dice al codice di azione della Fase 2, che l'immagine da modificare. Prima di inserire il codice nel corpo del documento HTML dopo il codice di azione, modificare la singola istanza di "home_off.gif" al nome della tua immagine "off". Modificare la singola istanza di "home_over.gif" al nome della tua immagine "over".
<A
HREF="rollover_target.html"
onMouseOver = "rollover ( 'casa')"
onMouseOut = "rollout ( 'casa')"
> & Lt; IMG
SRC = "../ grafica / home_off.gif"
NAME = "casa"
ALT = "Home Page" BORDER = 0
HEIGHT = 130 WIDTH = 115
> & Lt; / A>
<Script type = "text / javascript">
<! -
setrollover ( "../ grafica / home_over.gif");
// ->
</ SCRIPT>