Nwlapcug.com


Stili di OnMouseOver



L'effetto OnMouseOver, o rollover, è quando un webmaster i codici di un'immagine, il collegamento o il testo da modificare quando l'utente passa il cursore del mouse su di esso. L'effetto applicato può essere che un pulsante di menu blu diventa rosso o che un link si illumina. OnMouseOver fornisce un "live," si sentono interattiva ad un sito altrimenti statico e può dare un visitatore del sito spunti di navigazione o richieste di contenuto. I webmaster possono utilizzare Javascript o Cascading Style Sheets (CSS) a stili e codice di rollover.

JavaScript singola immagine Rollover

Creare due immagini della stessa dimensione. La prima immagine dovrebbe essere quello che vedono visitatori quando arrivano prima al sito. Questa è l'immagine di "off", l'immagine che verrà visualizzata quando un visitatore è non passa il mouse su di esso. La seconda immagine dovrebbe essere la "over" immagine, l'immagine che i visitatori vedranno quando il mouse sopra l'immagine di "off".

Aggiungere il codice seguente nell'HTML del tuo sito Web. Questo codice determinerà l'azione di rollover, modificando un'immagine a altra. Aprire il file HTML nel blocco note o editor HTML preferito e inserire il codice nel corpo del documento. Prima di inserire il codice, modificare la singola istanza di "home_off.gif" il nome della vostra immagine "off". Modificare la singola istanza di "home_over.gif" il nome della vostra immagine "oltre".

< SCRIPT TYPE = "text/javascript" >

<!...

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

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 >

< A

HREF="rollover_target.html"

onMouseOver = "rollover('home')"

onMouseOut = "rollout('home')"

>&lt;IMG

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

NAME="home"

ALT="Home Page" BORDER=0

HEIGHT=130 WIDTH=115

>&lt;/A>

< SCRIPT TYPE = "text/javascript" >

<!...

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

-->

< / SCRIPT >

Salvare e caricare il file HTML e tutte le immagini.

Multiplo di JavaScript immagine Rollover

Per caratterizzare più immagini con un effetto di attivazione sul tuo sito Web, creare due grafici per ogni immagine. Ogni immagine è bisogno di una versione di "off" che mostra l'immagine l'aspetto che si siede sul sito e una versione di "over" che mostra ciò che l'immagine cambia per quando una mossa di visitatore il cursore sopra l'immagine. Sia grafica per ogni immagine dovrebbe avere le stesse dimensioni.

Aggiungere il codice seguente nell'HTML del tuo sito Web. Questo codice determinerà l'azione del rollover su tutte le immagini. Inserire il codice nel corpo del documento.

< SCRIPT TYPE = "text/javascript" >

<!...

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

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 >

Dopo aver inserito questo codice, aprire un nuovo documento di blocco note e incollare questo codice nel nuovo file:

< A

HREF="link1.html"

onMouseOver = "rollover('name1')"

onMouseOut = "rollout('name1')"

>&lt;IMG

SRC="name1.off.gif"

NAME="name1"

HEIGHT=37 WIDTH=87 BORDER=0 ALT="name1"

>&lt;/A>

< SCRIPT TYPE = "text/javascript" >

<!...

setRollover('name1.over.gif');

-->

< / SCRIPT >

Uno di questi più piccoli blocchi di codice necessario per ogni immagine che si desidera avere un effetto di rollover. Modificare tutte le istanze di questi segnaposto utilizzati nel codice:

"link1.html" deve essere modificato il link dove l'immagine potrebbe indirizzare un utente.

"Nome1" deve essere modificato il nome di un'immagine.

"name1.off.gif" deve essere modificato il nome del file grafico visualizzato quando un utente non sta passando sopra l'immagine.

"name1.over.gif" deve essere modificato il nome del file grafico visualizzato quando un utente passa sopra l'immagine.

Dopo aver creato un blocco di testo per ciascuna delle vostre immagini, copiare ciascuno di essi e incollarli sotto il primo, più grande blocco di codice nel documento HTML.

Salvare e caricare il file HTML e tutte le immagini.

CSS in tutto sito Rollover

Creare un effetto di rollover per text links in tutto un sito Web utilizzando i CSS un: passa con stile. Incollare il codice tra i tag head:

< style type = "text/css" >

<! - un: hover {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: #990000}-->

< / stile >

Cambiare la famiglia di font, font-size e colore le impostazioni desiderate. Salvare e caricare il tuo file HTML. Tutti i collegamenti di testo ora cambierà su rollover dal loro aspetto iniziale all'apparenza specificato nell'una: passa con stile.

Salvare e caricare il file HTML.

Rollover di posizione specifica CSS

Se non si desidera che tutti i collegamenti per caratterizzare un effetto di rollover, solo quelli specifici, utilizzare un diverso codice CSS. Incollare il codice tra i tag head:

< style type = "text/css" >

<!...

.Links {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #003399}

.Links:hover {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #FF8B22; text-decoration: none}

-->

< / stile >

Ancora una volta, è possibile modificare il font-family, dimensione carattere e colore del link di testo. La linea ".links" imposta l'aspetto predefinito per i collegamenti di testo e la linea ".links:hover" l'aspetto del link di testo su rollover.

Ora passare attraverso il tuo file HTML e modificare i collegamenti di testo che si desidera per caratterizzare l'effetto di rollover. Aggiungere ogni collegamento alla classe di collegamento al passaggio del mouse con l'aggiunta di una designazione di classe. Un esempio di un link inalterato sarebbe:

< un href="myvacation.htm" target = Parent"> My Vacation < /a >

Sarebbe un link correttamente alterato:

< un href="myvacation.htm" target = Parent"class ="link"> My Vacation < /a >

Salvare e caricare il file HTML.