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>