Indhold
- Grundlæggende musemarkører
- Brugerdefinerede musmarkører
- Ændring af cursor stil med Inline Javascript
- Spiller med funktioner
Ændring af musemarkøren er en enkel måde at tilføje specialeffekter til din webside. Dette kan forbedre brugervenlighed ved at give brugerne yderligere visuelle hjælpemidler, især på mere komplekse sider som spil og interaktive kort. Du kan bruge Javascript til at ændre markørens stil i henhold til datoen, vejret og alt andet. Teknikken til at bruge Javascript, HTML og CSS til at oprette dynamiske websider er kendt som DHTML (Dynamic HTML).
Grundlæggende musemarkører
Der er flere standardmusemarkører, der kan bruges ved at ændre stilen på et element eller siden på siden. Navne er standard, crosshair, hånd, flyt, tekst, vent og hjælp. Se linket "CSS Cursor Property" i afsnittet "Ressourcer" for flere detaljer om dem. Brug CSS til at definere markøren, der vil blive vist, når du overfører et element som følger:
Cross-hår
Brugerdefinerede musmarkører
Udover de grundlæggende markører kan du bruge brugerdefinerede skabeloner ved at indstille adressen til en billedfil som markørformat, som i følgende eksempel:
Brugerdefineret markør
Ikke alle browsere understøtter denne funktion eller alle filtyper. For eksempel forventer Internet Explorer filer med ".cur" eller ".ani" -udvidelsen. Firefox accepterer ikke animerede markører (".ani") og forventer en grundlæggende markør ud over billedet. For de bedste resultater, angiv en markørfil (".cur" eller ".ani"), en billedfil (PNG, JPEG eller GIF) og en grundlæggende markørtype som backup. Følgende eksempel bruger en animeret markør som første valg, en simpel fil i anden række og den grundlæggende markør som den sidste mulighed. Browseren vil prøve alle mulighederne, indtil du finder en, du kan bruge:
Brugerdefineret markør
Åbn markørbiblioteket i afsnittet Ressourcer indeholder samlinger af gratis musemarkører.
Ændring af cursor stil med Inline Javascript
Du kan ændre cursorens CSS-stil ved hjælp af Javascript. Der er flere HTML-attributter relateret til mushandlinger, der kan bruges til at udføre kode ved at klikke, flytte eller svæve over et sideelement. Nogle eksempler er:
onmouseover: Musemarkøren passerer over et element. onmousedown: museknappen trykkes. onmouseup: Museknappen er frigivet. onmouseout: Musemarkøren afslutter elementet. ondblclick: Brugeren dobbeltklikker musen.
I afsnittet "Attributter" i afsnittet "Attributter" finder du flere attributter, som du kan bruge til at tilføje handlinger med Javascript.
Tilføj en handling til en begivenhed (for eksempel "mouseover") ved at indstille den kode, du vil køre som værdien af attributten. I eksemplet nedenfor ændres markøren til "hjælp" ved at svinge over linket.
Hjælp
Spiller med funktioner
Nogle gange vil du gerne gøre mere end én attribut tillader. Ved at skrive alle handlinger i en Javascript-funktion kan du sætte hele koden øverst i dit HTML-dokument og anvende det på ethvert element ved at foretage et opkald i tilfælde af attributten. Følgende kode ændrer markøren på elementet bestået som parameter "el":
funktion setElementCursor (el) {el.style.cursor = "url (3DArrow.cur), crosshair" GO}
Funktionen vil blive placeret i scriptafsnittet i dokumentoverskriften (mellem tagsne
og ) eller i en ekstern kodefil, der henvises til i samme del. For at bruge det, ring funktionen med søgeordet "this" fra en hændelsesattribut i en HTML-tag. Funktionen vil modtage en henvisning til elementet, der er associeret med musen, og ændrer markørstilen. For eksempel, hvis markøren hopper over den følgende tekst, ændrer markøren:Markøren ændres på dette link
Du kan også ændre hovedmarkøren, som vises, når du svinger over bunden af siden. Følgende funktion giver dig mulighed for at ændre markøren til den type, der er angivet i parameteren "curtype":
funktion setMainCursor (curtype) {switch (curtype) {case "loading": document.body.style.cursor = "url (work.ani), url (work.png), vent"; break GO case "forbudt": document.body.style.cursor = "url (unavailable.ani), url (unavailable.png), standard"; break GO case "default": default: document.body.style.cursor = "url (pil.cur), standard" GO}}
For at bruge det, kald det "loading", "forbudt" eller "standard" fra en hændelsesattribut i en HTML-tag. For eksempel ændrer den følgende knap markøren til "loading", når den klikkes:
Javascript-sproget har ubegrænset funktionalitet. Koden nedenfor tæller ned, og hvert sekund ændrer musemarkøren til et billede der er knyttet til den aktuelle værdi. Funktionen "setTimeOut" vil lade funktionen blive suspenderet i et sekund, før den bliver tilbagekaldt og opdateret tælleren.
funktion doCountdownCursor (count) {document.body.style.cursor = "url (" + count + ".ani), url (" + count + ".png) {setTimeout ("doCountdownCursor (" + count + ")", 1000) GO} else {document.body.style.cursor = "url (pil.cur), standard" GO}}
På websiden skal du bruge funktionen til at vise tællingen på musemarkøren, når du klikker på en knap på en formular.