Ændring af musemarkøren er en enkel måde at peppe din webside med cool specielle effekter. Musemarkøren stilarter kan forbedre din webside anvendelighed ved at give dine brugere med ekstra visuel feedback , især for mere komplekse scriptede websider som spil og interaktive kort . Javascript kan bruges ændre musemarkøren stil, så du kan ændre musemarkøren baseret på dags dato , vejret rapport eller næsten alt andet, du kan forestille dig. Teknikken med at bruge Javascript, HTML og CSS sammen for at skabe dynamiske websider er DHTML (Dynamic HTML) . Grundlæggende musemarkører

Der er flere standard musemarkører , der kan bruges ved at ændre stilen i en side element eller dokument krop. Disse Markøren stilarter omfatter standard kryds , hånd , flytte , tekst, wai og hjælp. Se " CSS cursor Property" forbundet i afsnittet Ressourcer for alle detaljer om alle de grundlæggende markøren stilarter. Markøren stil vises, når svævende over et element kan indstilles ved hjælp af CSS , som i dette eksempel : Hej

Cross- hair
Brugerdefineret musemarkører

Ud over de basale markører , kan brugerdefinerede markører benyttes ved at indstille markøren stil til adressen på en cursor -fil eller et billede , som i følgende eksempel : Hej

Brugerdefineret markør

Browser støtte til markøren stilarter og filtyper er inkonsekvent . For eksempel forventer Internet Explorer cursor -filer med . Cur eller . Ani extensions. Firefox kan ikke lide animerede markører ( . Ani -filer ) , og forventer en grundlæggende markør at blive opført i tillæg til cursor eller billedfil . For de bedste resultater blandt browsere , giver et cursor -fil (. Cur eller . Ani ) , en billedfil ( PNG, JPEG eller GIF) , og en grundlæggende markør type som en fallback . Dette eksempel bruger en animeret cursor for sit første valg , en almindelig markør filen som det andet valg og standard grundlæggende markør som det endelige fallback mulighed. Browseren vil forsøge hver mulighed , indtil den finder en det kan bruge.

; Brugerdefineret markør

" Open cursor Library" forbundet i afsnittet Ressourcer tilbyder gratis , no-bøvl Musemarkøren samlinger
Ændre cursor Style . med Inline Javascript

Du kan ændre musemarkøren CSS stil med Javascript. Der er flere HTML attributter relateret til musehandlinger , du kan bruge til at udføre Javascript når musen klikkes flyttes eller svævede over en webside element . Et par af disse attributter er : Hej

onmouseover : Musemarkøren svæver over elementonmousedown : Mus knap pressedonmouseup : Museknap releasedonmouseout : flytter musepilen væk fra elementonclick : Mus knap clickedondblclick : museknap dobbeltklikket
< p> Se " begivenhed attributter " linket i afsnittet Ressourcer for mere event attributter, du kan bruge til at tilføje Javascript handlinger.

Tilføj en Javascript handling til en begivenhed , såsom en mus -over , blot ved at sætte attributten værdi til Javascript-kode , du ønsker udført. I dette eksempel er markøren ændres til den grundlæggende " hjælp" cursor , når musen svæver over linket :

< a onmouseover = " this.style.cursor = 'hjælp' ," href = " # " > Hjælp
Sjov med funktioner

Nogle gange, du ønsker at gøre mere end komfortabelt passer ind i en mus handling attribut. Ved at skrive alle dine handlinger i en Javascript -funktion , kan du proppe al din kode i toppen af ​​dit HTML-dokument og få din cursor magi til at ske med en simpel funktion opkald i tilfælde attribut. Denne enkle Javascript funktion ændrer markøren stil for den webside element passerede ind som parameter "el " : Hej

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

Denne funktion er placeret i et script sektion i headeren af dokumentet (mellem og tags) , eller i en ekstern Javascript kodefil refereres til i header dokument . For at bruge denne funktion , kalder funktionen med søgeordet " denne" fra en begivenhed attribut i en HTML-tag . Funktionen modtager en henvisning til websiden element forbundet med musen begivenhed, og ændrer sin markør stil. For eksempel musemarkøren bevæger sig over denne sammenkædede tekst , når den viste markør fastsættes af funktionen : Hej

Sæt markøren til dette link

Du kan også ændre den primære markør , der vises , når markøren svæver over websiden baggrunden. Denne Javascript funktion , der sætter musemarkøren for de vigtigste webside krop baseret på værdien gået ind funktionen som parameteren " curtype " : Hej

funktion setMainCursor ( curtype ) { switch ( curtype ) { case " loading" : document.body.style.cursor = "url ( working.ani ) url ( working.png ) , vent " break; case " forbudte " : document.body.style.cursor = "url ( unavailable.ani ) url ( unavailable.png ) , default " break; sag " default " : default : document.body.style.cursor = " url ( arrow.cur ) , default ";} }

For at bruge denne funktion , kalder funktionen med værdien " loading ", " forbudt " eller "default " fra en begivenhed attribut i en HTML-tag . For eksempel sende denne formular knap kalder funktionen for at indstille markøren til " loading" , når der klikkes på knappen : Hej

< input type = "send" onclick = " javascript: setMainCursor ( loading '); "/>

Der er ingen grænse for, hvad du kan gøre med Javascript -funktioner. Følgende funktion udfører en nedtælling ved at ændre den primære musemarkøren hvert sekund til en markør billede der er tilknyttet den aktuelle tælling . Den setTimeout funktionen bruges til at forårsage den funktion til at sove i et sekund før det kaldes igen med den opdaterede tæller .

Funktion doCountdownCursor (count ) { document.body.style.cursor = "url (" + count + " . ani ) , url ( " + count + " . png ) , vent " count - og hvis (tæl > 0) { setTimeout ( " doCountdownCursor (" + count + " )" , 1000) ; } else { document.body.style.cursor = "url ( arrow.cur ) , default ";} }

på websiden , skal du bruge denne funktion til at have musemarkøren tælle ned fra 10, når en formular send-knappen er klikket på.