Copyright © 2002,2003 Jørgen Farum Jensen
Ikke alle tænker lige over, at CSS-specifikationen også tillader control over cursorens udseende. Men det gør den altså. Ikke nok med det, formregler for cursoren understøttes faktisk af både IE 4+ og af NS 6+.
Jeg blev første gang opmærksom på det, da jeg skulle lave en selvkørende skærmshow i form af en serie websider. De fine skærmbilleder blev noget skæmmet af den sædvanlige pil-markøren, der stod og flagrede et eller andet tilfældigt sted på skærmen.
På en webside gengives cursoren normalt i følgende 3 tilstande:
Tabellen herunder giver en oversigt over de formregler, der danner de forskellige cursor-former, samt hvorledes cursoren scriptes. Føre du musen hen over tabelcellen i venstre kolonne, kan du se resultatet af at sætte formregler for cursoren i forbindelse med hver tabelcelle.
| Facon | CSS-erklæring | Scripting |
| default | cursor: default; | element.style.cursor = "default" |
| move | cursor: move; | element.style.cursor = "move" |
| hand | cursor: hand; | element.style.cursor = "hand" |
| crosshair | cursor: crosshair; | element.style.cursor = "crosshair" |
| wait | cursor: wait; | element.style.cursor = "wait" |
| help | cursor: help; | element.style.cursor = "help" |
| w-resize | cursor: w-resize; | element.style.cursor = "w-resize" |
| n-resize | cursor: n-resize; | element.style.cursor = "n-resize" |
| e-resize | cursor: e-resize; | element.style.cursor = "e-resize" |
| s-resize | cursor: s-resize; | element.style.cursor = "s-resize" |
| nw-resize | cursor: nw-resize; | element.style.cursor = "nw-resize" |
| ne-resize | cursor: ne-resize; | element.style.cursor = "ne-resize" |
| se-resize | cursor: se-resize; | element.style.cursor = "se-resize" |
| ww-resize | cursor: ww-resize; | element.style.cursor = "ww-resize" |
| auto | cursor: auto; | element.style.cursor = "auto" |
| none | cursor: none; | element.style.cursor = "none" |
Der er følgende bemærkninger at gøre til denne oversigt:
hand er en Microsoft-opfindelse. CSS2-specifikationen angiver ikke nogen egenskab for cursor-elementet, der hedder hand.
pointer, der fortolkes korrekt af alle andre browsere end IE.
Så hvis vi ønsker en hånd i alle browsere, når vi gerne vil have en hånd i IE, er det nødvendigt at anføre 2 formregler:
| Facon | CSS-erklæring | Scripting |
| pointer | cursor:pointer;cursor:hand; | element.style.cursor = "pointer" og element.style.cursor = "hand" |
Du må ikke ændre på den orden, du oplyser hhv. pointer og hand.
Flyt cursoren hen over denne tekst.
Cursorændringen over den dybrøde kasse er lavet med en mouseover på kassen. Scriptet ses nedenfor. Cursorændringen over teksten er lavet med et stylesheet: p.crosshair {cursor:crosshair}
<script type="text/javascript">
function changeCursor(){
blok=document.getElementById('test')
blok.style.cursor="wait"
}
</script>
