Endre musepekeren er en enkel måte å sprite opp nettside med kule spesialeffekter. Musepekeren stiler kan forbedre din nettside mer brukervennlig ved å gi brukerne med ekstra visuell tilbakemelding , spesielt for mer kompliserte regisserte nettsider som spill og interaktive kart . Javascript kan brukes endre musepekeren stil, slik at du kan endre musepekeren basert på dagens dato , været rapport eller nesten alt annet du kan tenke deg. Teknikken med å bruke Javascript , HTML og CSS sammen for å lage dynamiske websider er DHTML ( Dynamic HTML ) . Grunnleggende Musen Markøren
p Det er flere standard mus pekere som kan brukes ved å endre stilen til en side element eller dokument kroppen. Disse markøren stiler inkluderer standard trådkors , hånd , flytte, tekst , wai og hjelp. Se " The CSS markøren Property" knyttet i Resources for full informasjon om alle de grunnleggende markøren stiler. Markøren stil vises når svever over et element kan stilles ved hjelp av CSS , som i dette eksemplet : en

Cross -hair < /a >
Custom musen Markøren

i tillegg til de grunnleggende pekere , kan tilpassede pekere brukes ved å sette markøren stilen til adressen til en markør fil eller bilde, som i følgende eksempel : en

Custom markør < /a >

Nettleserstøtte for markøren stiler og filtyper er inkonsekvent. For eksempel, forventer Internet Explorer markøren filer med . Nå eller . Ani extensions. Firefox ikke liker animerte musepekere ( . Ani -filer) , og forventer en grunnleggende markøren å være oppført i tillegg til markøren eller bildefil . For best resultat mellom nettlesere , gi en markør fil ( . Nå eller . Ani ) , en bildefil ( PNG , JPEG eller GIF ) , og en grunnleggende markørtype som en reserveløsning . Dette eksemplet bruker en animert markør for sitt førstevalg , en vanlig markør fil som andre valg og standard grunnleggende markøren som det endelige fallback alternativet. Nettleseren vil prøve hvert alternativ til den finner en det kan bruke.

; Custom markør < /a >

"Åpne markør Library" knyttet i Resources tilbyr gratis, ikke-stresset musepekeren samlinger
Endre markøren stil . med Inline Javascript

Du kan endre musepekeren CSS stil med Javascript. Det er flere HTML-attributter relatert til mus handlinger du kan bruke til å utføre Javascript når du klikker på musen , flyttes eller svevde over en nettside element . Noen av disse attributtene er : en

onmouseover : musepekeren over elementonmousedown : museknapp pressedonmouseup : Museknapp releasedonmouseout : Musepekeren beveger seg ut av elementonclick : museknapp clickedondblclick : Museknapp dobbeltklikket
< p> Se " hendelse attributter " link i Resources for flere arrangement attributter du kan bruke til å legge Javascript handlinger.

Legg en Javascript handling til en hendelse , for eksempel en mus -over , rett og slett ved å sette attributtet verdi til Javascript -koden du ønsker utført. I dette eksemplet er markøren endres til basic " hjelp" markøren når musen holdes over koblingen :

Hjelp < /a >
Moro med funksjoner

Noen ganger ønsker du å gjøre mer enn komfortabelt passer i en mus handling attributt. Ved å skrive alle dine handlinger i en Javascript -funksjonen , kan du stappe all koden på toppen av HTML-dokumentet , og føre til at markøren magi til å skje med en enkel funksjon samtale i tilfelle attributt . Denne enkle Javascript -funksjonen markøren endringer stil for nettsiden element gått inn som parameter "el " : en

funksjon setElementCursor ( el ) { el.style.cursor = " url ( 3DArrow.cur ) , trådkors "; }

Denne funksjonen ligger i et skript seksjonen i overskriften på dokumentet ( mellom og < /head> ) , eller i en ekstern Javascript-kode filen referert til i overskriften på dokument. Hvis du vil bruke denne funksjonen , kaller funksjonen med søkeordet "dette" fra en hendelse attributt i en HTML -kode. Funksjonen mottar en henvisning til nettsiden element i forbindelse med musen hendelsen , og skifter markøren stil . For eksempel når musepekeren beveger seg over dette koblede teksten , vil markøren vises settes av funksjon : en

Sett markøren for denne koblingen < /a >

Du kan også endre den viktigste markøren som vises når markøren er svever over nettet siden bakgrunnen . Dette Javascript -funksjon som setter musepekeren for de viktigste web side organ basert på verdien gått inn i funksjonen som parameter " CurType " : en

funksjon setMainCursor ( CurType ) { switch ( CurType ) { case " loading" : document.body.style.cursor = " url ( working.ani ) , url ( working.png ) , vent "; break ; case " forbudt" : document.body.style.cursor = " url ( unavailable.ani ) , url ( unavailable.png ) , default "; break ; case" default " : standard: document.body.style.cursor =" url ( arrow.cur ) , default "; } }

å bruke denne funksjonen , kaller funksjonen med verdien "lasting ", " forbudt " eller "default " fra en hendelse attributt i en HTML -kode. For eksempel dette skjemaet send-knappen kaller funksjonen for å sette markøren til " loading" når knappen klikkes : en

< input type = " submit" onclick = " javascript: setMainCursor (' lasting '); " />
p Det er ingen grenser for hva du kan gjøre med Javascript-funksjoner . Følgende funksjon utfører en nedtelling ved å endre den viktigste musepekeren hvert sekund til en markør image forbundet med den nåværende greven . SetTimeout funksjonen brukes til å føre til at funksjonen til å sove et sekund før det kalles igjen med den oppdaterte opptelling .

Funksjon doCountdownCursor ( teller) { document.body.style.cursor = " url ( " + teller + " . ani ) , url ( " + teller + " . png ) , vent "; teller - ; if ( teller > 0 ) { setTimeout ( " doCountdownCursor ( " + teller + ")" , 1000 ); } else { document.body.style.cursor = " url ( arrow.cur ) , default "; } }

på websiden , bruk denne funksjonen til å ha musepekeren telle ned fra 10 når et skjema send-knappen klikkes.