CSS - kurzory, 6.diel

V stránkach, ktoré sú stavané v drvivej väčšine cez CSS je možné si nadefinovať vlastné kurzory nad elementy. Automaticky sa kurzory priraďujú napr. k odkazom resp. tagom <a>.

Ak chceme mať svoj vlastný CSS kurzor stačí ak si ho nadefinujeme a nemusí to byť len kurzor určený prehliadačom. Takúto možnosť nám prinieslo CSS vo verzií 2. Prehlidače majú možnosť zobrazovať 17 typov kurzorov prostredníctvom preddefinovaných hodnôt ale je tu ešte aj ďalšia možnosť zobrazenia vlastného kurzoru. Túto možnosť si popíšeme na konci článku.

Prehľad preddefinovaných kurzorov(stačí prejsť myšou po zvýrazneneom elemente):

Cursor: url

Cursor: auto

Cursor: crosshair

Cursor: default

Cursor: pointer (V MSIE je to 'hand')

Cursor: move

Cursor: e-resize

Cursor: ne-resize

Cursor: nw-resize

Cursor: n-resize

Cursor: se-resize

Cursor: sw-resize

Cursor: s-resize

Cursor: w-resize

Cursor: text

Cursor: wait

Cursor: help

Toto boli všetky možné kurzory s ktorými sa môžete zatiaľ v CSS stretnúť. Povedal som, že si ešte popíšeme posledný spôsob ako zobraziť vlastný kurzor, ktorý bude uložený na disku. Postačí nám na to nasledujúci jednoduchý CSS kód.

* { cursor:url('vlastny_kurzor.cur'),pointer };

CSS kód vyjadruje najprv primárny kurzor, ktorý sa má zobraziť a následne sekundárny kurzor, ktorý bude zobrazený po nenájdení primárneho. Môžete samozrejme zadať aj ďalšie typy kurzorov(terciárny, kvarciárny atď.).

Toto by bolo o kurzoroch v CSS asi všetko. Uvidíme aké nové prinesie CSS3 :-).

Alternatívne verzie: