Cursorens udseende

Cursoren er den lille figur man fører rundt på skærmen med sin mus eller touch pad, når man skal pege på noget eller klikke på en knap eller et link. Den går også under navnet pointer, men pointer i dag refererer specifikt til den cursor der ligner en hånd med en udstrakt pegefinger.

De fleste har antageligt lagt mærke til hvordan cursoren skifter mellem at ligne en lille pil eller en hånd med en udstrakt pegefinger eller noget helt tredje, afhængig af hvad man peger på. Dette kan man styre på sin hjemmeside. Der ligger i HTML en række default cursorer, afhængig af objekttypen, f.eks. en hånd ved links lavet med A-tag'en.

Der er to måder at definere cursoren på:

• Med STYLE="cursor:cursortype",dvs. crosshair kommer til at hedde STYLE="cursor:crosshair"
• Med ONMOUSEOVER="this.style.cursor='cursortype'". Dette er i virkeligheden et JavaScript. Vil man have f.eks. crosshair, som før, bliver det så ONMOUSEOVER="this.style.cursor='crosshair'"

Om man vælger det ene eller det andet, er en smagssag. Der dog den detalje, at med STYLE er kompatibiliteten bagud med Safari og Opera ikke fantastisk. For Safari er det først fra ver. 5.0 og for Opera er det fra ver. 9.6.

Dette er de standardcursorer der pt. findes til HTML. Der er flere der er ens, så det er ikke alle de opfundne cursorer der giver lige meget mening at anvende. Man skal også lige være opmærksom på, at ikke alle browsere (dvs. Internet Explorer) viser helt den samme cursor ved alle koderne.

Cursor	Beskrivelse	Testområde. Hold cursoren over cellen for at se effekten.
alias	Cursoren indikerer at et alias af noget skal laves.	Testområde.
all-scroll	Cursoren indikerer at der kan scrolles i alle retninger.	Testområde.
auto	Default. Browseren bestemmer en cursor.	-
cell	Cursor indikerer at en eller flere celler kan vælges.	Testområde.
context-menu	Cursoren indikerer at en context-menu er tilgængelig.	Testområde.
col-resize	Cursoren indikerer at søjlen kan ændres i størrelse i vandret orientering.	Testområde.
copy	Cursor indikerer at noget skal kopieres.	Testområde.
crosshair	Cursor ses som et crosshair (sigtekorn)	Testområde.
default	Default cursor	Testområde.
e-resize	Cursoren indikerer at en kant på en box kan flyttes til højre eller venstre.	Testområde.
ew-resize	Indikerer en tovejs cursor til ændring af størrelse (højre/venstre).	Testområde.
grab	Cursoren indikerer, at her er der noget der kan gribes.	Testområde.
grabbing	Cursoren indikerer, at her er der noget der er grebet.	Testområde.
help	Cursoren indikerer at hjælp er tilgængelig.	Testområde.
move	Corsoren indikerer at der er noget der kan flyttes.	Testområde.
n-resize	Cursoren indikerer, at en kant på en box kan flyttes op og ned	Testområde.
ne-resize	Cursoren indikerer, at en kant på en box kan flyttes skråt op til højre og skråt ned til venstre.	Testområde.
nesw-resize	Indikerer en tovejs cursor til ændring af størrelse (skråt op til højre/skråt ned til venstre).	Testområde.
ns-resize	Indikerer en tovejs cursor til ændring af størrelse (op/ned).	Testområde.
nw-resize	Cursoren indikerer, at en kant på en kasse skal flyttes skråt op til venstre eller skråt ned til højre (nord/øst)	Testområde.
nwse-resize	Indikerer en tovejs cursor til ændring af størrelse	Testområde.
no-drop	Cursoren indikerer at objektet man er i færd med at trække, ikke kan stilles her	Testområde.
none	Ingen cursor vises for elementet	Testområde.
not-allowed	Cursoren indikerer, at den ønskede handling ikke vil blive udført	Testområde.
pointer	Cursoren er en pointer og indikerer et link	Testområde.
progress	Cursoren indikerer, at programmet er optaget (i gang)	Testområde.
row-resize	Cursoren indikerer, at størrelsen på rækken kan ændres vertikalt	Testområde.
s-resize	Cursoren indikerer, at en kant på en kasse kan flyttes ned (syd) og op (nord)	Testområde.
se-resize	Cursoren indikerer, at kanten på en kasse kan flyttes skråt ned til højre (syd/øst) og skråt op til venstre (nord/vest)	Testområde.
sw-resize	Cursoren indikerer, at kanten på en kasse kan flyttes skråt ned mod venstre (syd/vest) og skråt op mod højre (nord/øst)	Testområde.
text	Cursoren indikerer tekst som kan markeres	Testområde.
URL	Custom made cursorer. Se næste afsnit.	-
vertical-text	Cursoren indikerer lodret tekst, som kan markeres	Testområde.
w-resize	Cursoren indikerer, at kanten på en kasse kan flyttes til venstre (vest), og højre (øst)	Testområde.
wait	Cursoren indikerer at programmet er optaget	Testområde.
zoom-in	Cursoren indikerer at der er noget der kan zoomes ind på	Testområde.
zoom-out	Cursoren indikerer at der er noget der kan zoomes ud fra	Testområde.
initial	Egenskaberne sættes til default-værdierne.	-
inherit	Egenskaberne nedarves fra forældreelementet.	-

Hvis man skulle have lyst til at lave sine egne cursorer til hjemmeside, er dette også muligt for de fleste browsere (visse versioner af Internet Explorer ignorerer denne kode). Det gøres som udgangspunkt med STYLE="cursor:URL", men med den tilføjelse, at URL skal udstyres med sti og filnavn på billedet man vil anvende, og der skal være en back-up fra ovenstående cursorliste specificeret. Det mest nærliggende er 'auto', således at hvis billedet ikke dukker op, så får man den cursor man normalt ville forvente, men det er ikke et krav.

Hvis vi laver en lille pointer, her hedder den HTML-Hajen_Cursor.png og ligger i det directory der hedder Graphics, så skal der ved objektet, der skal vise cursoren, stå STYLE="cursor:url(Graphics/HTML-Hajen_Cursor.png), auto;". Så bliver resultatet som vist på denne DIV:


Man kan også bruge ONMOUSEOVER som beskrevet i begyndelsen. I så fald hedder den analoge kode ONMOUSEOVER="this.style.cursor='url(../Graphics/HTML-Hajen_Cursor.png), auto'".

Der er ingen formelle krav til filtypen, men hvis man ikke bruger et retvinklet, firkantet motiv (f.eks. et flag) så kan man med fordel anvende filformater der tillader usynlige dele (dvs. filformater der tillader en alfakanal). Dette er f.eks. gif- og png-filer, som i det viste eksempel.