Un'immagine di rollover, spesso indicata come semplicemente un rollover, è un elemento su un sito Web che aggiunge chiarore interattiva. Quando un visitatore web passa il cursore del mouse sopra un'immagine di rollover, l'immagine cambia. Questo consente ai progettisti web di offrire indizi di navigazione visuale facendo i pulsanti cliccabili cambiare colore quando si passa il mouse sopra. Immagini di rollover, inoltre, creare un senso di movimento e di azione su un sito web altrimenti statico.

Istruzioni

1

Creare due immagini della stessa dimensione. La prima immagine sarà che i visitatori uno vedere quando arrivano prima al sito. Questa è l'immagine di "off", l'immagine che viene visualizzato quando un visitatore è non passa il mouse su di esso. La seconda immagine è l'immagine di "over", l'immagine che viene visualizzata quando qualcuno mouses sopra l'immagine di "off".

2

Aggiungere il codice seguente nell'HTML del tuo sito Web. Questo codice determinerà l'azione di rollover, la modifica di un'immagine a altra. Aprire il file HTML nel blocco note o editor di testo preferito e inserire il codice nel corpo del documento. Non apportare modifiche al codice.

< SCRIPT TYPE = "text/javascript" >

<!...

http://www.idocs.com/tags/ Copyright 1999 IDOC, Inc.

Distribuire questo script liberamente, ma si prega di tenere questo

avviso con il codice.

var rollOverArr = new Array ();

funzione setrollover(OverImgSrc,pageImageName)

{

Se (! document.images)return;

Se (pageImageName = = null)

pageImageName = document.images[document.images.length-1].name;

rollOverArr [pageImageName] = nuovo oggetto;

rollOverArr [pageImageName] .overImg = nuova immagine;

rollOverArr [pageImageName].overImg.src = OverImgSrc;

}

funzione rollover(pageImageName)

{

Se (! document.images)return;

Se (! rollOverArr [pageImageName]) return;

Se (! rollOverArr[pageImageName].outImg)

{

rollOverArr[pageImageName].outImg = new Image;

rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;

}

Document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;

}

funzione rollout(pageImageName)

{

Se (! document.images)return;

Se (! rollOverArr [pageImageName]) return;

Document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;

}

-->

< / SCRIPT >

3

Successivamente, aggiungere il codice che indica il codice di azione del passaggio 2 l'immagine da modificare. Prima di inserire il codice nel corpo del documento HTML dopo il codice di azione, è possibile modificare la singola istanza di "home_off.gif" per il nome della vostra immagine "off". Modificare la singola istanza di "home_over.gif" il nome della vostra immagine "oltre".

< A

HREF="rollover_target.html"

onMouseOver = "rollover('home')"

onMouseOut = "rollout('home')"

><IMG

SRC="../graphics/home_off.gif"

NAME="home"

ALT="Home Page" BORDER=0

HEIGHT=130 WIDTH=115

></A>

< SCRIPT TYPE = "text/javascript" >

<!...

setRollover(".. / graphics/home_over.gif ");

-->

< / SCRIPT >