Er zijn verschillende standaard muisaanwijzers die gebruikt kan worden door aanpassing van de stijl van een pagina-element of document lichaam. Deze cursor stijlen zijn het standaard , crosshair , hand , beweging , tekst , wai en hulp. Zie " De CSS cursor Property " gekoppeld in het gedeelte Bronnen voor meer informatie over alle basis cursor stijlen . De cursor stijl weergegeven wanneer zweefde over een element kan worden ingesteld met behulp van CSS , zoals in dit voorbeeld :

style="cursor:crosshair" href="#"> Cross - hair < /a >
custom cursors Muis

Naast de basis- cursors , kunnen aangepaste cursors gebruikt worden door de cursor stijl aan het adres van een cursor bestand of afbeelding , zoals in het volgende voorbeeld :

style="cursor:url(arrow.cur), default" href="#"> Custom cursor < /a >

Browser ondersteuning
voor cursor stijlen en bestandstypen is inconsistent . Bijvoorbeeld Internet Explorer verwacht cursor -bestanden met . Huidig ​​of . Ani extensies . Firefox houdt niet van geanimeerde cursors ( . Ani -bestanden ) , en verwacht een fundamentele cursor naast de cursor of image-bestand te worden opgenomen . Voor de beste resultaten onder de browsers , bieden een cursor -bestand ( . Huidig ​​of . Ani ) , een beeldbestand ( PNG , JPEG of GIF ) , en een basistype cursor als noodoplossing . In dit voorbeeld wordt een geanimeerde cursor voor zijn eerste keuze , een vlakte cursor bestand als de tweede keuze en de standaard elementaire cursor als de laatste fallback optie . De browser zal elke optie proberen totdat het vindt men het kan gebruiken .

Style="cursor:url(arrow.ani), url(arrow.cur), default" href="#"> , Custom cursor < /a >

de " Open cursor Library " gekoppeld in het gedeelte Bronnen biedt gratis , geen - gedoe muiscursor collecties
wijzigen Cursorstijl . met Inline Javascript

U kunt de muiscursor CSS stijl met Javascript veranderen . Er zijn verschillende HTML- attributen die verband houden met de muis acties die u kunt gebruiken om Javascript uit te voeren wanneer de muis wordt geklikt , verplaatst of beweegt over een webpagina element . Een paar van deze kenmerken zijn :

onmouseover
: muisaanwijzer op de elementonmousedown : muis knop pressedonmouseup : muis knop releasedonmouseout : Muis pijlaanwijzer af van de elementonclick : muis knop clickedondblclick : Mouse button dubbel geklikt

Zie de link " event attributen " in het gedeelte Bronnen voor meer event attributen die je kunt gebruiken om Javascript acties toevoegen .

Voeg een Javascript actie om een gebeurtenis , zoals een muis -over , simpelweg door het instellen waarde van het attribuut om de Javascript- code die u wilt uitvoeren . In dit voorbeeld wordt de cursor veranderd in de basis " help" cursor als de muis over de link :

< a onmouseover = " this.style.cursor = ' hulp ' ; " href = " # " > Help < /a >
Plezier met functies

Soms , wilt u meer dan comfortabel in een muis actie attribuut past doen . Door het schrijven van al je acties in een Javascript -functie , kunt u al uw code proppen aan de bovenkant van uw HTML-document , en zorgen dat uw cursor magie te gebeuren met een eenvoudige functie oproep in het attribuut event . Deze eenvoudige Javascript functie verandert de cursor stijl voor het web pagina element doorgegeven als parameter " el " :

functie setElementCursor
( el ) { el.style.cursor = " url ( 3DArrow.cur ) , crosshair " ; }

Deze functie bevindt zich in een sectie script in de header van het document ( tussen de en < /head> ) , of in een externe Javascript -code bestand waarnaar wordt verwezen in de kop van de document . Om deze functie te gebruiken , bel de functie met het trefwoord " dit " van een gebeurtenis attribuut in een HTML-tag . De functie ontvangt een verwijzing naar de webpagina element geassocieerd met de muis evenement , en verandert de cursor stijl . Bijvoorbeeld , wanneer de muisaanwijzer beweegt over deze gelinkte tekst , de cursor weergegeven wordt door de functie in te stellen :

onmousemove="javascript:setElementCursor(this);" href="#"> Zet de cursor voor deze link < /a >

U kunt ook de belangrijkste cursor die wordt weergegeven wanneer de cursor zweefde over de webpagina achtergrond . Deze javascript functie die de muiscursor stelt voor de belangrijkste webpagina lichaam op basis van de waarde doorgegeven aan de functie als de parameter " curtype " :

functie setMainCursor
( curtype ) { switch ( curtype ) { case " laden " : document.body.style.cursor = " url ( working.ani ) , url ( working.png ) , wacht " break; case "verboden " : document.body.style.cursor = " url ( unavailable.ani ) , url ( unavailable.png ) , default " break; case " default " : default : document.body.style.cursor = " url ( arrow.cur ) , default " ; } }

Om deze functie te gebruiken , roepen de functie met de waarde " laden ", " verboden " of "default " van een gebeurtenis attribuut in een HTML-tag . Bijvoorbeeld , dit formulier submit knop roept de functie om de cursor op " laden " wanneer de knop wordt geklikt :

< input type = " submit " onclick = " javascript : setMainCursor ( ' lading ' ) ; " />

Er is geen limiet aan wat je kunt doen met Javascript -functies . De volgende functie voert een countdown door het veranderen van de belangrijkste muiscursor per seconde om een ​​cursor afbeelding in overeenstemming met de huidige telling . De setTimeOut functie wordt gebruikt om ervoor zorgen dat de functie om te slapen voor een seconde voordat deze opnieuw wordt aangeroepen met de bijgewerkte telling .

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

op de webpagina , gebruik deze functie te hebben de muiscursor tellen vanaf 10 wanneer een formulier submit knop wordt geklikt .