CSS kurzory

Internet Explorer od verze 4, Mozilla a Opera umo╛≥ujφ kontrolovat podobu kurzoru my╣i. Zadßvß se to jako CSS styl. Nap°φklad se dß normßlnφ text ud∞lat tak, ╛e vypadß jako odkaz:

<span style="cursor: hand; cursor: pointer; color: blue">tento text</span>

Zkuste si jej p°ejet my╣φ:

tento text

P°ehled hodnot

LevΘ bu≥ky obsahujφ hodnoty vlastnosti "cursor" a zßrove≥ fungujφ jako testovacφ plocha, nad kterou m∙╛ete tßhnout my╣φ.

Auto Zßkladnφ podoba kurzoru zßvislß na charakteru elementu
Crosshair K°φ╛ek na zam∞°ovßnφ
Default Podoba je zßvislß na nastavenφ systΘmu. Obvykle ╣ipka.
Hand RuΦiΦka obvykle znßzor≥uje klikacφ oblast. Nestandardnφ, funguje v IE.
Pointer RuΦiΦka obvykle znßzor≥uje klikacφ oblast. Funguje v Mozille a Ope°e
Move ╚ty°╣ipka znßzor≥ujφcφ mo╛nost p°esunutφ objektu
e-resize Kurzory pro zm∞nu velikosti.
Pφsmenka na zaΦßtku vyjad°ujφ (anglicky) sm∞r,
kam bude ╣ipka ukazovat.
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text Textov² kurzor ve tvaru velkΘho I
wait P°es²pacφ hodiny.
help ⌐ipka s otaznφkem znaΦφcφ mo╛nost nßpov∞dy.

Kurzory budou mφt podobu podle toho, jak je mß nainstalovßn poΦφtaΦ u klienta. Proto╛e CSS podobu kurzoru nepodporujφ v╣echny prohlφ╛eΦe (nap° NN4 ne), nelze se na to spolehnout.

Internet Explorer 6

Dajφ se navφc pou╛φt tyto:

all-scroll skrolovacφ kurzor, kter² se n∞kdy objevuje po stisku prost°ednφho tlaΦφtka
col-resize jako zm∞na ╣φ°ky sloupce
no-drop ruΦiΦka s naznaΦenφm neklikatelnosti 
not-allowed p°e╣krtnutΘ koleΦko
progress  ╣ipka s hodinami, jako ╛e se n∞co d∞je
row-resize  zm∞na v²╣ky °ßdku
vertical-text le╛at² textov² kurzor vertikßlnφho textu

Vlastnφ kurzory

Dßle IE 6 umo╛≥uje zadat libovolnΘmu elementu obrßzkov² kurzor ze souboru cur nebo ani.

cursor: url('soubor.cur') 

Existujφ programy, kterΘ dokß╛ou zkonvertovat obrßzek do formßtu cur, jß pou╛φvßm IconArt. Nenφ ·pln∞ trivißlnφ ud∞lat dobr² kurzor, hlavn∞ je t°eba se um∞t trefit do "aktivnφho prostoru" obrßzku (╣piΦku ╣ipky je pot°eba mφt zhruba uprost°ed kurzoru). ⌐patn∞ ud∞lanΘ kurzory majφ toti╛ sklon objevovat se na trochu jinΘm mφst∞, ne╛ by bylo optimßlnφ. 

P°φpadn∞ se dajφ p°edepsat dal╣φ soubory, kdy╛ ten p°edchozφ nenφ podporovan²:

cursor: url('soubor.ani') , url('soubor2.cur') ,url('soubor3.csr')

P°φklad nßpov∞dy

<div style="cursor: help;" title="toto je text nßpov∞dy, kter² se objevφ v bublin∞">Text, nad kter²m se objevφ otaznφΦek</div>

Vypadß takhle, zkuste si p°ejet my╣φ:

Text, nad kter²m se objevφ otaznφΦek

Pou╛itφ

Nemß moc smysl nastavovat zm∞n∞n² kurzor celΘ strßnce (tag body), leda ve v²jimeΦn²ch p°φpadech. Spφ╣e doporuΦuji dßvat unikßtnφ kurzory ke zvlß╣tnφm druh∙m odkaz∙. Nap°φklad je pou╛itelnß ╣ipka dol∙ (s-resize) u odkaz∙ na zßlo╛ky, kterΘ mφ°φ n∞kam dol∙ na tutΘ╛ strßnku. Nebo kurzor s otaznφkem (help) nad odkazem, kter² vede na n∞jakou nßpov∞du. 

Odkazy ven: Pixy o kurzorech, P°ehled od Patrika K÷lbla, program IconArt, kter²m d∞lßm grafickΘ kurzory

o tvorb∞, ·dr╛b∞ a zlep╣ovßnφ internetov²ch strßnek

Pφ╣e Yuh∙, dusan@pc-slany.cz

Hledßnφ:

KaskßdovΘ styly na www.jakpsatweb.cz

Pφ╣e Yuh∙: http://dusan.pc-slany.cz, mail: dusan@pc-slany.cz

Poslednφ aktualizace 10.12.2003