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
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.
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 |
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')
<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╣φ:
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