HTML-Hajen

Cursorens udseende









Hvad er cursoren?

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.


Forskellige cursore

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å:
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.


Liste over cursorer

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.


CursorBeskrivelseTestområde. Hold cursoren over cellen for at se effekten.
aliasCursoren indikerer at et alias af noget skal laves.Testområde.
all-scrollCursoren indikerer at der kan scrolles i alle retninger.Testområde.
autoDefault. Browseren bestemmer en cursor.-
cellCursor indikerer at en eller flere celler kan vælges.Testområde.
context-menuCursoren indikerer at en context-menu er tilgængelig.Testområde.
col-resizeCursoren indikerer at søjlen kan ændres i størrelse i vandret orientering.Testområde.
copyCursor indikerer at noget skal kopieres.Testområde.
crosshairCursor ses som et crosshair (sigtekorn)Testområde.
defaultDefault cursorTestområde.
e-resizeCursoren indikerer at en kant på en box kan flyttes til højre eller venstre.Testområde.
ew-resizeIndikerer en tovejs cursor til ændring af størrelse (højre/venstre).Testområde.
grabCursoren indikerer, at her er der noget der kan gribes.Testområde.
grabbingCursoren indikerer, at her er der noget der er grebet.Testområde.
helpCursoren indikerer at hjælp er tilgængelig.Testområde.
moveCorsoren indikerer at der er noget der kan flyttes.Testområde.
n-resizeCursoren indikerer, at en kant på en box kan flyttes op og nedTestområde.
ne-resizeCursoren indikerer, at en kant på en box kan flyttes skråt op til højre og skråt ned til venstre.Testområde.
nesw-resizeIndikerer en tovejs cursor til ændring af størrelse (skråt op til højre/skråt ned til venstre).Testområde.
ns-resizeIndikerer en tovejs cursor til ændring af størrelse (op/ned).Testområde.
nw-resizeCursoren 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-resizeIndikerer en tovejs cursor til ændring af størrelseTestområde.
no-dropCursoren indikerer at objektet man er i færd med at trække, ikke kan stilles herTestområde.
noneIngen cursor vises for elementetTestområde.
not-allowedCursoren indikerer, at den ønskede handling ikke vil blive udførtTestområde.
pointerCursoren er en pointer og indikerer et linkTestområde.
progressCursoren indikerer, at programmet er optaget (i gang)Testområde.
row-resizeCursoren indikerer, at størrelsen på rækken kan ændres vertikaltTestområde.
s-resizeCursoren indikerer, at en kant på en kasse kan flyttes ned (syd) og op (nord)Testområde.
se-resizeCursoren 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-resizeCursoren 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.
textCursoren indikerer tekst som kan markeresTestområde.
URLCustom made cursorer. Se næste afsnit.-
vertical-textCursoren indikerer lodret tekst, som kan markeresTestområde.
w-resizeCursoren indikerer, at kanten på en kasse kan flyttes til venstre (vest), og højre (øst)Testområde.
waitCursoren indikerer at programmet er optagetTestområde.
zoom-inCursoren indikerer at der er noget der kan zoomes ind påTestområde.
zoom-outCursoren indikerer at der er noget der kan zoomes ud fraTestområde.
initialEgenskaberne sættes til default-værdierne.-
inheritEgenskaberne nedarves fra forældreelementet.-

Custom made cursorer

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:

Testområde for custom cursor.

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.