Endre et musepeker i Javascript

June 28

Endre musepekeren er en enkel måte å sprite opp din nettside med kule spesialeffekter. Musepekeren stiler kan forbedre nettsidens brukervennlighet ved å gi brukerne med ekstra visuell tilbakemelding, spesielt for mer komplekse regisserte websider som spill og interaktive kart. Javascript kan brukes endre musepekeren stil, slik at du kan endre musepekeren basert på dagens dato, værmelding 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 mus pekere

Det finnes flere standard musepekere 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 "CSS markør Property" knyttet i Resources for full informasjon om alle de grunnleggende markør stiler. Markøren stil vises når du holder markøren over et element kan stilles ved hjelp av CSS, som i dette eksempelet:

<a style=\"cursor:crosshair\" href=\"#\"> Cross-hår </a>

Custom mus pekere

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

<a style=\"cursor:URL(arrow.cur), default\" href=\"#\"> Custom markør </a>

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

<a style=\"cursor:URL(arrow.ani), URL(arrow.cur), default\" href=\"#\"> Custom markør </a>

"Åpne Cursor Library" knyttet i Resources tilbyr gratis, ingen problemfri musepekeren samlinger.

Endre markøren stil med Javascript Inline

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 musen klikkes, flyttes eller svevde over en nettside element. Noen få av disse attributtene er:

onmouseover: Mus pekeren over elementet
onmousedown: museknappen inne
onmouseup: museknapp løslatt
onmouseout: muspekeren flyttes bort av elementet
onclick: museknapp klikkes
ondblclick: museknapp dobbeltklikket

Se i "Event attributter" linken i Resources for mer event attributter du kan bruke til å legge til 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 det grunnleggende "hjelp" markøren når musen svever over linken:

<a onmouseover=\"this.style.cursor='help';\" href=\"#\"> Hjelp </a>

Moro med funksjoner

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

function setElementCursor (el) { el.style.cursor = \"URL(3DArrow.cur), crosshair\"

GÅ

}

Denne funksjonen ligger i et skript avsnitt i overskriften på dokumentet (mellom <head> og </ head> taggene), eller i en ekstern Javascript-kode fil som er nevnt i overskriften på dokumentet. For å bruke denne funksjonen, kaller funksjonen med søkeordet "dette" fra en hendelse attributt i en HTML-kode. Funksjonen mottar en henvisning til websiden element i forbindelse med musen hendelsen, og endrer sin markør stil. For eksempel, når musepekeren beveger seg over denne koblede teksten, vises markøren vil bli satt ved funksjonen:

<a onmousemove=\"javascript:setElementCursor(this);\" href=\"#\"> Sett markøren for denne koblingen </a>

Du kan også endre den viktigste markøren som vises når markøren svever over nettsiden bakgrunnen. Denne Javascript-funksjonen som setter musepekeren for hoved nettside kroppen basert på verdien gått inn i funksjonen som parameter "CurType":

function setMainCursor (curtype) { switch (curtype) { case \"loading\" : document.body.style.cursor = \"URL(working.ani), URL(working.png), wait\" ; break

GÅ

case \"forbidden\": document.body.style.cursor = \"URL(unavailable.ani), URL(unavailable.png), default\" ; break

GÅ

case \"default\": default: document.body.style.cursor = \"URL(arrow.cur), default\"

GÅ

} }

For å bruke denne funksjonen, kaller funksjonen med verdien "loading", "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:

Det er ingen grenser for hva du kan gjøre med Javascript-funksjoner. Følgende funksjon utfører en nedtelling ved å endre hovedmusepekeren hvert sekund til en markør bilde knyttet til den gjeldende teller. SetTimeout funksjonen brukes til å føre til at funksjonen for å sove et sekund før det kalles på nytt med den oppdaterte teller.

function doCountdownCursor (count) { document.body.style.cursor = \"URL(\" + count + \".ani), URL(\" + count + \".png), wait\"

GÅ

count--

GÅ

if (count > 0) { setTimeout (\"doCountdownCursor (\" + count + \")\", 1000)

GÅ

} else { document.body.style.cursor = \"URL(arrow.cur), default\"

GÅ

} }

På nettsiden kan du bruke denne funksjonen til å få musepekeren telle ned fra 10 når et skjema send-knappen klikkes.