o tvorbě, údržbě a zlepšování internetových stránek
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}
Jak psát web píše Yuhů, Dušan Janovský. Poslední aktualizace 01. května 2004.