Inhoud
- Basis muiscursors
- Aangepaste muiscursors
- De cursiststijl wijzigen met Inline Javascript
- Spelen met functies
Het veranderen van de muiscursor is een eenvoudige manier om speciale effecten aan uw webpagina toe te voegen. Dit kan de bruikbaarheid verbeteren door gebruikers extra visuele hulpmiddelen te bieden, vooral op complexere pagina's zoals games en interactieve kaarten. U kunt Javascript gebruiken om de cursustijl te wijzigen aan de hand van de datum, het weer en al het andere. De techniek van het gebruik van Javascript, HTML en CSS om dynamische webpagina's te maken, staat bekend als DHTML (Dynamic HTML).
Basis muiscursors
Er zijn verschillende standaard muisaanwijzers die kunnen worden gebruikt door de stijl van een element of de hoofdtekst van de pagina aan te passen. De namen zijn standaard, draadkruis, hand, verplaatsen, tekst, wachten en hulp. Zie de link "CSS Cursor Property" in het gedeelte "Resources" voor meer informatie hierover. Gebruik CSS om de cursor die wordt weergegeven bij het overgeven van een element als volgt te definiëren:
Cross-hair
Aangepaste muiscursors
Naast de standaard cursors, kunt u aangepaste sjablonen gebruiken door het adres van een afbeeldingsbestand in te stellen als cursorstijl, zoals in het volgende voorbeeld:
Aangepaste cursor
Niet alle browsers ondersteunen deze functie of alle bestandstypen. Internet Explorer verwacht bijvoorbeeld bestanden met de extensie ".cur" of ".ani". Firefox accepteert geen geanimeerde cursors (".ani") en verwacht een basiscursor voorbij de afbeelding. Voor de beste resultaten geeft u een cursorbestand (".cur" of ".ani"), een afbeeldingsbestand (PNG, JPEG of GIF) en een basistype cursor als back-up aan. In het volgende voorbeeld wordt een geanimeerde cursor als eerste keuze gebruikt, een eenvoudig bestand op de tweede plaats en de basiscursor als de laatste optie. De browser zal alle opties proberen totdat je er een vindt die je kunt gebruiken:
Aangepaste cursor
De Open Cursor Library in de Resources-sectie biedt verzamelingen gratis muisaanwijzers.
De cursiststijl wijzigen met Inline Javascript
U kunt de CSS-stijl van de cursor wijzigen met Javascript. Er zijn verschillende HTML-kenmerken gerelateerd aan muisacties die kunnen worden gebruikt om code uit te voeren door op een pagina-element te klikken, te verplaatsen of te zweven. Enkele voorbeelden zijn:
onmouseover: de muisaanwijzer passeert een element. onmousedown: De muisknop is ingedrukt. onmouseup: de muisknop is vrijgegeven. onmouseout: de muisaanwijzer verlaat het element. ondblclick: de gebruiker dubbelklikt op de muis.
In het gedeelte "Attributen" van het gedeelte "Attributen" vindt u meer attributen die u kunt gebruiken om acties met Javascript toe te voegen.
Voeg een actie toe aan een evenement (bijvoorbeeld 'mouseover') door de code in te stellen die u wilt uitvoeren als de waarde van het kenmerk. In het onderstaande voorbeeld verandert de cursor in "help" door de muis over de link te bewegen.
Help
Spelen met functies
Soms wil je meer doen dan één attribuut toestaat. Door alle acties in een Javascript-functie te schrijven, kunt u alle code bovenaan uw HTML-document plaatsen en deze op elk element toepassen door een oproep te plaatsen in het gebeurtenisattribuut. De volgende code verandert de cursor op het element dat is doorgegeven als parameter "el":
functie setElementCursor (el) {el.style.cursor = "url (3DArrow.cur), draadkruis" GO}
De functie bevindt zich in de scriptsectie van de documentkop (tussen de tags
en ) of in een extern codebestand waarnaar in hetzelfde onderdeel wordt verwezen. Als u dit wilt gebruiken, roept u de functie met het trefwoord 'dit' aan vanuit een gebeurtenisattribuut in een HTML-tag. De functie ontvangt een verwijzing naar het element dat is gekoppeld aan de muisgebeurtenis en zal de cursiststijl wijzigen. Als de aanwijzer bijvoorbeeld de volgende tekst overslaat, verandert de cursor:De cursor verandert op deze link
U kunt ook de hoofdcursor wijzigen die wordt weergegeven wanneer u de muisaanwijzer over de onderkant van de pagina beweegt. Met de volgende functie kunt u de cursor wijzigen in het type dat is aangegeven in de parameter "curtype":
function setMainCursor (curtype) {switch (curtype) {case "loading": document.body.style.cursor = "url (working.ani), url (working.png), wacht"; break GO-case "verboden": document.body.style.cursor = "url (unavailable.ani), url (unavailable.png), standaard"; break GO case "default": standaard: document.body.style.cursor = "url (arrow.cur), standaard" GO}}
Om het te gebruiken, noem het "laden", "verboden" of "standaard" van een evenementattribuut in een HTML-tag. Met de volgende knop verandert de cursor bijvoorbeeld in 'Laden' wanneer erop wordt geklikt:
De Javascript-taal heeft een onbeperkte functionaliteit. De onderstaande code telt af en elke seconde verandert de muiscursor in een afbeelding die is gekoppeld aan de huidige waarde. De functie "setTimeOut" laat de functie een seconde staan voordat deze wordt opgeroepen en werkt de teller bij.
function doCountdownCursor (count) {document.body.style.cursor = "url (" + count + ".ani), url (" + count + ".png) {setTimeout ("doCountdownCursor (" + count + ")", 1000) GO} else {document.body.style.cursor = "url (arrow.cur), standaard" GO}}
Gebruik op de webpagina de functie om de telling op de muisaanwijzer weer te geven wanneer u op een knop op een formulier klikt.