Come fare un rollover o Mouseover

July 27

Come fare un rollover o Mouseover


Un rollover o passaggio del mouse è un oggetto particolare su un sito web. Questo oggetto cambia forma quando gli utenti si sposta il mouse sopra l'oggetto sullo schermo. Ad esempio, l'oggetto originale potrebbe essere un'immagine, ma quando l'utente sposta il mouse su questo oggetto iniziale, l'oggetto iniziale cambia in un secondo oggetto, ad esempio una seconda immagine. Un uso più comune di rollover è quello di avere un pulsante in una pagina Web si accendono quando un utente ha spostato il suo mouse sopra il pulsante.

istruzione

1 Identificare l'oggetto sul tuo sito web per il quale si desidera avere un effetto rollover.

2 Aprire il codice HTML per il tuo sito web. Inserire il seguente codice nel tuo sito:

<A href = "WEBSITE.html"

onmouseover = "buttondown ( 'nomeimmagine')"

onmouseout = "ButtonUp ( 'nomeimmagine')">

<Img Nome del confine = "nomeimmagine" = "0" />

</a>

Sostituire pagina web nel codice precedente con il nome del particolare pagina Web, e sostituire nomeimmagine con il nome dell'immagine per la quale si desidera creare un effetto di rollover.

3 Immettere il seguente codice nella sezione <head> della pagina Web:

<Script language = tipo "JavaScript" = "text / javascript">

<! -

if (document.images) {

homebuttonup = new Image();

homebuttonup.src = "IMAGENAME.gif";

homebuttondown = nuova immagine ();

homebuttondown.src = "IMAGENAME2.gif";

}

Funzione buttondown (buttonname)

{

if (document.images) {

documentare [buttonname] .src = eval (buttonname + "down.src");

}

}

Funzione ButtonUp (buttonname)

{

if (document.images) {

documentare [buttonname] .src = eval (buttonname + "up.src");

}

}

// ->

</ Script>

Sostituire ImageName con l'immagine che si desidera avere visualizzato nella pagina Web quando l'oggetto non dispone di un mouse su di esso. Sostituire IMAGENAME2 con l'immagine che si desidera avere visualizzato nella pagina Web quando l'oggetto ha un mouse su di esso.

4 Salvare la pagina Web e caricarlo sul server. Il vostro oggetto ora dovrebbe avere un effetto rollover.


Articoli Correlati