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 | Zastaralá hodnota pro Internet Explorer 6, použijte místo ní pointer. |
| 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ší:
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 kotvy, 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.
Reklama
