Forsiden » Stylesheets (CSS) » Cursorkontrol

Kontrol med cursorens udseende

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:

  1. Den sidste række repræsenterer mit oprindelige behov. Som det ses var mine forhåbninger forgæves. Cursoren kan ikke fjernes, og rækken hører i virkeligheden slet ikke til i tabellen.
  2. Den grå række med cursor-egenskaben hand er en Microsoft-opfindelse. CSS2-specifikationen angiver ikke nogen egenskab for cursor-elementet, der hedder hand.
    Derimod findes der en egenskab, der hedder 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.

Cursor-ændring med JavaScript

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>

E-mail nyhedsbrev

Vælg normal præsentation

Vis siden som den ser ud i udskrift Send siden til udskrift.