onmouseover Styles

August 1

Den onmouseover, eller velt, er effekten når en webmaster koder et bilde, link eller tekst for å endre når brukerne passere sin markøren over den. Den påførte effekt kan være at en blå menyknappen blir rød eller som en link lyser. Onmouseover gir en "live", interaktiv stemning til et ellers statisk nettside og kan gi et nettsted besøkende navigasjon pekepinner eller innholdsmeldinger. Webmasters kan bruke enten Javascript eller Cascading Style Sheets (CSS) til å kode forskjellige stiler av velt.

Javascript Enkeltbilde Roll

Lag to bilder av samme størrelse. Det første bildet bør være hva brukerne ser når de først kommer til nettstedet. Dette er "off" bilde, vil bildet som vises når en besøkende ikke å bevege musen over det. Det andre bildet skal være "over" bilde, vil bildet som besøkende vil se når de musen over "off" image.

Legg inn koden nedenfor i nettstedets HTML. Denne koden vil føre til at virkningen av roll, endre ett bilde til et annet. Åpne HTML-filen i Notisblokk eller din foretrukne HTML editor og sette inn koden i kroppen av dokumentet. Før du setter inn koden, endre enkelt forekomst av "home_off.gif" til navnet på "off" image. Endre enkelt forekomst av "home_over.gif" til navnet på "over" bilde.

<! -

// Distribuer dette skriptet fritt, men vennligst hold dette

// Varsel med koden.

Var rollOverArr = new Array ();

funksjon setrollover (OverImgSrc, pageImageName)

{

hvis retur (document.images!);

if (pageImageName == null)

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

rollOverArr [pageImageName] = new Object;

rollOverArr [pageImageName] .overImg = new Bilde;

rollOverArr [pageImageName] .overImg.src = OverImgSrc;

}

funksjon roll (pageImageName)

{

hvis retur (document.images!);

hvis retur (rollOverArr [pageImageName]!);

if (! rollOverArr [pageImageName] .outImg)

{

rollOverArr [pageImageName] .outImg = new Bilde;

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

}

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

}

funksjon utrulling (pageImageName)

{

hvis retur (document.images!);

hvis retur (rollOverArr [pageImageName]!);

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

}

// ->

</ SCRIPT>

HREF="rollover_target.html"

onMouseOver = "rollover (" hjem ")"

onmouseout = "utrulling (" hjem ")"

> & Lt; IMG

SRC = "../ grafikk / home_off.gif"

NAME = "hjem"

ALT = "Home Page" BORDER = 0

Height = 130 width = 115

> & Lt; / a>

<! -

setrollover ( "../ grafikk / home_over.gif");

// ->

</ SCRIPT>

Lagre og laste opp HTML-fil og alle bildene.

Javascript Multiple Bilde Roll

Slik har flere bilder med en rollover effekt på nettstedet ditt, lage to grafikk for hvert bilde. Hvert bilde trenger en "off" versjon som viser hva bildet vil se ut som sitter på nettsiden, og en "over" versjon som viser hva bildet endres til når en besøkende bevege markøren over bildet. Både grafikk for hvert bilde skal være av samme størrelse.

Legg inn koden nedenfor i nettstedets HTML. Denne koden vil føre til at virkningen av roll på alle bildene. Sett inn koden inn i kroppen av dokumentet.

<! -

// Distribuer dette skriptet fritt, men vennligst hold dette

// Varsel med koden.

Var rollOverArr = new Array ();

funksjon setrollover (OverImgSrc, pageImageName)

{

hvis retur (document.images!);

if (pageImageName == null)

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

rollOverArr [pageImageName] = new Object;

rollOverArr [pageImageName] .overImg = new Bilde;

rollOverArr [pageImageName] .overImg.src = OverImgSrc;

}

funksjon roll (pageImageName)

{

hvis retur (document.images!);

hvis retur (rollOverArr [pageImageName]!);

if (! rollOverArr [pageImageName] .outImg)

{

rollOverArr [pageImageName] .outImg = new Bilde;

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

}

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

}

funksjon utrulling (pageImageName)

{

hvis retur (document.images!);

hvis retur (rollOverArr [pageImageName]!);

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

}

// ->

</ SCRIPT>

Etter denne koden er satt inn, åpner en ny Notisblokk-dokument og lim inn denne koden i den nye filen:

HREF="link1.html"

onMouseOver = "roll ( 'name1')"

onmouseout = "utrulling ( 'name1')"

> & Lt; IMG

SRC = "name1.off.gif"

NAME = "name1"

HØYDE = 37 width = 87 border = 0 alt = "name1"

> & Lt; / a>

<! -

setrollover ( 'name1.over.gif');

// ->

</ SCRIPT>

Du trenger en av disse mindre blokker av kode for hvert bilde du ønsker å ha en rollover effekt. Endre alle forekomster av disse plassholderne som brukes i kode:

"Link1.html" bør endres til koblingen der bildet kan lede en bruker.

"Name1" bør endres til navnet på et bilde.

"Name1.off.gif" bør endres til navnet på den grafiske filen som vises når en bruker ikke passerer over bildet.

"Name1.over.gif" bør endres til navnet på den grafiske filen som vises når en bruker passerer over bildet.

Når du har opprettet en tekstblokk for hver av dine bilder, kopiere hver av dem og lime dem under den første, større blokk med kode i HTML-dokumentet.

Lagre og laste opp HTML-fil og alle bildene.

CSS Gjennom nettstedet Roll

Lag en rollover effekt for tekstlenker gjennom en nettside ved hjelp av CSS a: hover stil. Lim inn denne koden mellom hodet kodene:

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

</ Style>

Endre font-family, font-størrelse og farge til dine ønskede innstillinger. Lagre og laste opp HTML-fil. Alle tekstlenker vil nå endre på rollover fra sitt opprinnelige utseende til utseendet spesifisert i en: hover stil.

Lagre og laste opp HTML-filen.

CSS Spesifikk plassering Roll

Hvis du ikke vil at alle linker til har en rollover effekt, bare bestemte seg, bruke en annen CSS-kode. Lim inn denne koden mellom hodet kodene:

<! -

.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}

</ Style>

Igjen, kan du endre font-family, font-størrelse og farge på tekst linker. Den ".links" linje setter standard utseende for tekstlenker og ".links: hover" linje setter utseendet på tekstlenker ved velt.

Nå går gjennom HTML-fil og endre tekst linker som du vil funksjonen roll effekt. Legg hver kobling til hover linken klassen ved å legge en klasse betegnelse. Et eksempel på en uendret kobling vil være:

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

Et riktig endret kobling vil være:

<a href="myvacation.htm" target="_parent" class="links"> My Vacation </a>

Lagre og laste opp HTML-filen.