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ší:

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 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

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.