|
Různé druhy zobrazení kurzoru na stránce pomocí CSS
Kurzor myši je jistě nedílnou součástí každé webové stránky, uživateli slouží jako prostředek při pohybu po webové stránce.
Také to jak vypadá je jistě důležité, je to jakási navigace, která nám říká co dělat.V tomto článku si popíšeme jak
lze změnit jeho vzhled.
Jistě jste si všimli, že pokud například přejedete kurzorem myši na webové stránce přes hypertextový odkaz kurzor se změní s klasické
šipky (auto) na symbol ruky (hand).
Pomocí Kaskádových stylů (CSS) můžete na stránce nastavit, to kdy a kde se tento kurzor změní na vámi nastavený typ symbolu.
CSS nám umožňují použít několik
druhů zobrazení kurzoru jak můžete vidět níže v tabulkovém přehledu jednotlivých typů kurzorů.Toto nastavení nám umožňuje vlastnost cursor.
Při přejetí myší nad jednotlivými políčky tabulky se kurzor změní
| auto |
hand |
move |
text |
wait |
help |
default |
crosshair |
Při přejetí myší nad jednotlivými políčky tabulky se kurzor změní
| w-resize |
nw-resize |
n-resize |
ne-resize |
e-resize |
se-resize |
s-resize |
sw-resize |
Pokud se rozhodnete použít vlastnosti cursor mějte na paměti, že by jste se měli držet určitých zavedených pravidel.To jest symboli používat pro ty elementy, pro které jsou určeny, protože
někteří uživatelé se při prohlížení stránek také řídí podle toho jak se kurzor chová.Například použití kurzoru typu move u hypertextového odkazu by mohlo být pro uživatele dosti matoucí.
V Internet Exploreru je vlastnost cursor plně podporována, horší je to v Netscape Navigatoru 4 zde tato vlastnost podporu nemá.
cursor:auto - auto
cursor:default - šipka 
cursor:crosshair - zaměřovač 
cursor:hand - ruka 
cursor:move - posun 
cursor:text - text 
cursor:wait - načítání 
cursor:help - nápověda 
cursor:e-resize - ukazatel 
cursor:n-resize - ukazatel 
cursor:w-resize - ukazate  l
cursor:s-resize - ukazatel 
cursor:ne-resize - šipka 
cursor:se-resize - šipka 
cursor:nw-resize - šipka 
cursor:sw-resize - šipka 
Atributy vlastnosti cursor použité od verze IE 6.0
cursor:all-scroll - posun 
cursor:col-resize - resize 
cursor:row-resize - resize 
cursor:no-drop - zakázaná ruka 
cursor:not-allowed - stop 
cursor:pointer - ruka
cursor:progress - načítání 
cursor:spinning - načítání
cursor:vertical - text 
cursor:copy - kopírování 
cursor:alias - přejít 
cursor:cell - plus 
cursor:grabbing - ruka táhnutí 
cursor:grab - uvolněná ruka 
Vlastní ikonka kurzoru
cursor:url - hodnota url je adresa, kde je uložen obrázek vašeho kurzoru s příponou .cur
Přílad:
cursor: url("images/cursor.cur")
Zpět
| 
