CSS vlastnost cursor urΦuje vzhled kurzoru my╣i nad prvkem.
| hodnoty | vzhled kurzoru my╣i |
|---|---|
| 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, Ope°e a v IE 6 |
| 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. V r∙zn²ch verzφch systΘmu Windows ten kurzor vypadß dost r∙zn∞. NespolΘhejte na jeho vzhled. |
| 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. |
Vzhled kurzoru ruΦiΦky je asi nejpou╛iteln∞j╣φ. Proto╛e IE5 neum∞jφ hodnotu cursor: pointer, ale cursor: hand, zadßvß se prvku, nad kter²m mß b²t ruΦiΦka, styl:
cursor: pointer; cursor: hand
(v tomto po°adφ) bude se to pak chovat sprßvn∞ ve v╣ech prohlφ╛eΦφch. N∞kterΘ prvky majφ p°ednastavenou podobu kurzoru, nap°. odkazy (tag <a> a <area>) majφ ruΦiΦku, textovΘ prvky majφ jakoby cursor: text.
| hodnoty | vzhled kurzoru my╣i |
|---|---|
| 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 |
| Prohlφ╛eΦ | Podpora ve verzφch | Poznßmka |
|---|---|---|
| 4, 5, 5.5, 6 | IE 6 podporuje dal╣φ nestandardnφ hodnoty | |
| Mozilla (Netscape 6+) | v╣echny verze | |
| Opera | 7 | mo╛nß i 6 |
| Konqueror | nevφm | |
| IE 5 / Mac | ano | |
| Netscape Navigator 4 | ne |
Nad odstavcem se bude zobrazovat kurzor p°es²pacφch hodin:
<p style="cursor: wait">╚ekß╣ tu a bude╣ tu Φekat nav╛dy :-)</p>
╚ast∞j╣φ je snaha vytvo°it kurzor s otaznφkem nad n∞Φφm, co mß u sebe dopl≥ujφcφ informaci (nejΦast∞ji v atributu title):
Normßlnφ text a <span title="dopl≥ujφcφ informace" style="cursor: help">text s vysv∞tlivkou</span>
V p°φpad∞ textu s roz╣i°ujφcφ informacφ se roz╣φ°il zvyk n∞jak graficky upozornit na to, ╛e je dopl≥ujφcφ informace k dispozici. Obvykle se to d∞lß slabou ╣edou p°eru╣ovanou Φarou pod textem (a pokud se n∞co d∞lß obvykle, m∞lo by se u toho z∙stat). Jestli╛e bude takov²ch text∙ v dokumentu vφc, u╛ se vyplatφ ud∞lat na to t°φdu. Jß ji pojmenovßvßm class="about".
<style>
.about {border-bottom: 1px dashed grey; cursor: help}
</style>
...
Normßlnφ text a <span title="dopl≥ujφcφ informace" class="about">text s
vysv∞tlivkou</span>
Dost Φasto je t°eba nad n∞jak²m prvkem ud∞lat kurzor ruΦiΦku, aby u╛ivatel v∞d∞l, ╛e na to m∙╛e kliknout. Nad odkazy se d∞lß ruΦiΦka sama, ale v p°φpad∞ n∞jak²ch klikacφch skript∙ je pot°eba p°idat ruΦiΦku obΦas i nad n∞co jinΘho. Nenφ v tom problΘm krom∞ toho, ╛e Internet Explorer si ruΦiΦku pojmenoval po svΘm jako hand, kde╛to sprßvn∞ (pro Mozillu a spol.) se ruΦiΦka jmenuje pointer. Dß se to ale zapsat dohromady:
.klikaci {cursor: hand; cursor: pointer}
Zm∞na kurzoru pomocφ CSS, hodn∞ dal╣φch informacφ.
o tvorb∞, ·dr╛b∞ a zlep╣ovßnφ internetov²ch strßnek