HOME -> CSS_TUTORIAL -> css-16 Søndag, 22. Oktober 2017

HOME
FORUM
OPEN DIRECTORY
BOOKMARK
Offentliggjort 2002 - Opdateret n/a

CSS lektion 16

User interface

Følgende beskrives i denne lektion:
  • Curser
  • Afsluttende eksempel

Cursor
I forbindelse med cursor har du følgende mulige værdier som du kan anvende:

auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help

Grundinstillingen ved cursor er altid 'auto'.

Ved at anvende cursor kan du selv specificere typen af cursor som skal vises når der peges på en enhed. De førnævnte værdier har følgende betydning:

crosshair
=> Kors eller kryds '+'.

default
=> Default, afhængig af den platform (OS) du anvender, er som regel en pil.

pointer
=> Cursor er en pointer som indikerer en link.

move
=> Indikerer noget som skal flyttes 'moved'.

e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
=> Indikerer flytning af 'ender'(edge). For eksempel: 'se-resize' cursor bliver anvendt når bevægelsen starter fra syd-øst hjørne af en box.

text
=> Indikerer tekst.

wait
=> Indikerer at programmet venter.

help
=> Hjælp indikation.


En cursor kan tildeles via url'en. Hvis brugeren ikke kan håndtere den første cursor, bør der være en enden cursor til rådighed, hvis ingen af de foreslåede cursor kan håndteres bør man afslutte med en fra listen.

p { cursor : url("foerste.cur"), url("anden.csr"), text; }


Afsluttende eksempel
Her kan du se hvordan de enkelte cursor ser ud i din browser, klik på linket nedenfor.


<html>
<head>
<title>cursor</title>
</head>
<body>
<p>Bevæg musemarkøren over ordene for at se hvordan cursor ændrer sig.</p>
<span style="cursor: auto">Auto</span><br />
<span style="cursor: crosshair">Crosshair</span><br />
<span style="cursor: default">Default</span><br />
<span style="cursor: hand">Hand (pointer)</span><br />
<span style="cursor: pointer">Pointer (hand)</span><br />
<span style="cursor: move">Move</span><br />
<span style="cursor: e-resize">e-resize</span><br />
<span style="cursor: ne-resize">ne-resize</span><br />
<span style="cursor: nw-resize">nw-resize</span><br />
<span style="cursor: n-resize">n-resize</span><br />
<span style="cursor: se-resize">se-resize</span><br />
<span style="cursor: sw-resize">sw-resize</span><br />
<span style="cursor: s-resize">s-resize</span><br />
<span style="cursor: w-resize">w-resize</span><br />
<span style="cursor: text">text</span><br />
<span style="cursor: wait">wait</span><br />
<span style="cursor: help">help</span><br />
</body>
</html>



Vis som eksempel

Det var alt for denne gang. Hvordan du kommer videre kan du læse i appendix A i forlængelse af denne lektion. Her kan du også læse det nødvendige omkring validering af css dokumenter.

APPENDIX A - HVORDAN KOMMER JEG VIDERE? >>

 

Copyright © 2002 - 2017
NETeXplorer.dk · All rights reserved Top