RoleΦky pomocφ CSS se vÜφm vÜudy
V tomto Φlßnku si ukß₧eme, jak vytvo°it pouze s pomocφ CSS "dokonalΘ" roleΦky û tedy obrßzky, kterΘ se p°i p°ejetφ kurzorem myÜi zm∞nφ na jinΘ obrßzky. Samoz°ejmostφ bude p°ednahrßnφ (preload) obrßzku a plnß p°φstupnost roleΦku v jakΘmkoliv prohlφ₧eΦi.
RoleΦky se pou₧φvajφ ji₧ od dob nejstarÜφch prohlφ₧eΦ∙ a jsou obvykle °eÜeny pomocφ JavaScriptu. Vychßzφ se p°itom z podobnΘho (X)HTML k≤du:
Do strßnky je tedy vlo₧en obrßzkov² odkaz. Obrßzek, kter² je zde nahrßn, je zßrove≥ stavem roleΦku p°ed p°ejetφm myÜφ. Odkaz m∙₧e b²t vno°en i v jinΘm elementu ne₧ <div>, jß jsem ho zde vybral kv∙li jeho neutrßlnosti. P°i tradiΦnφm °eÜenφ se k tomuto k≤du p°idajφ javascriptovΘ ovladaΦe udßlostφ, kterΘ zajistφ prohozenφ obrßzku. Ne tak ale tentokrßt û my toti₧ pou₧ijeme k vytvo°enφ roleΦku pouze CSS.
Princip °eÜenφ
Jak² je logick² postup °eÜenφ v CSS? Druh² obrßzek, kter² se mß zobrazit p°i p°ejetφ kurzorem myÜi, nastavφme jako pozadφ prvku <a>. Za normßlnφch okolnostφ tedy bude zakryt obrßzkem, kter² se vlo₧φ dφky prvku <img>. P°i najetφ kurzoru myÜi nad odkaz (stav "hover" v CSS) ale obrßzek p°esuneme za odkaz a u₧ivatel uvidφ druh² obrßzek (jako pozadφ odkazu). P°i umφst∞nφ kurzoru mimo odkaz se obrßzek op∞t p°esune nad odkaz a skryje tak jeho pozadφ.
P°ikroΦme k praktickΘmu provedenφ. ZaΦneme tφm jednoduÜÜφm, tedy nastylovßnφm odkazu:
background: url("button2.gif") no-repeat;
display: block;
width: 164px; height: 82px;
}
Prvnφ deklaracφ jsme p°i°adili druh² obrßzek na pozadφ odkazu. Ve zbytku pravidla jsme potom dali odkazu p°esnΘ rozm∞ry û bez nich d∞lß cel² efekt prohlφ₧eΦ∙m problΘmy. Obrßzek mß Üφ°ku 164 pixel∙ a v²Üku 82 pixel∙. Vlastnost display je zde proto, ₧e rozm∞ry se nemohou nastavovat °ßdkov²m prvk∙m (proto jsme z odkazu ud∞lali blokov²). TakΘ zruÜφme rßmeΦek kolem obrßzku:
border: 0; /* zruÜenφ °ßmeΦku kolem obrßzku */
}
A nynφ se ji₧ budeme v∞novat p°esunovßnφ obrßzku za odkaz, tedy vlastn∞ jeho pozicovßnφ ve t°etφm rozm∞ru. To se v CSS d∞lß vlastnosti z-index, kterou p°i stavu "hover" odkazu nastavφme na -1:
z-index: -1;
position: relative;
}
Vlastnost z-index je mo₧nΘ vyu₧φvat jen u pozicovan²ch prvk∙, proto obrßzek takΘ relativn∞ pozicujeme. Aby se nßm obrßzek neposunul "za dokument", musφme nastavit vlastnost z-index i pro nßÜ <div>, dφky Φemu₧ se obrßzek bude posouvat za n∞j:
position: relative;
z-index: 0;
}
V prohlφ₧eΦi se zapnut²mi obrßzky nenφ rozdφl poznat. Pokud si je ale vypnete, zjistφte, ₧e by bez tohoto pravidla prvek obrßzku p°i stavu "hover" z dokumentu ·pln∞ zmizel (posunul by se pod dokument), co₧ nevypadß p°φliÜ hezky.
Poznßmka: Vedle pseudot°φdy "hover" jsme efekt nastavili i pro pseudot°φdu "focus". Ta je vlastn∞ obdobou "hover" p°i pohybu po strßnce pomocφ klßvesnice (aktivuje se p°i zam∞°enφ prvku kurzorem ovlßdan²m obvykle pomocφ klßvesy TAB).
Chyba v Internet Exploreru 6
VÜechno by tedy u₧ m∞lo fungovat. Prohlφ₧eΦ Microsoft Internet Explorer 6 vÜak obsahuje "zajφmavou" chybu, kterß zp∙sobφ, ₧e tento k≤d nebude fungovat tak, jak oΦekßvßme. ProblΘm spoΦφvß v tom, ₧e MSIE 6 bere v ·vahu zm∞ny p°i stavu "hover" u prvk∙ vno°en²ch v odkazu jen tehdy, kdy₧ se zm∞nφ i n∞jakß vlastnost samotnΘho odkazu. (A neptejte se m∞, jak dlouhou dobu jsem strßvil objevovßnφm tΘto chyby...) Musφme tedy p°idat pravidlo, kde ud∞lßme n∞jakou neÜkodnou zm∞nu odkazu p°i stavu "hover">:
background-position: 0 0;
}
Jak vidφte, zm∞nili jsme hodnotu vlastnosti background-position. Jejφ v²chozφ hodnotou je 0% 0% û ta mß ale naprosto stejn² v²znam jako 0 0.
Suma sumarum
Vytvo°ili jsme tedy roleΦek pouze pomocφ CSS, kter² sprßvn∞ funguje v prohlφ₧eΦφch MSIE 6+, Mozilla, Opera 7+ a v dalÜφch, kterΘ majφ podporu CSS na dostateΦnΘ ·rovni (budu rßd, kdy₧ zmφnφte funkΦnost roleΦku v dalÜφch prohlφ₧eΦφch v diskusi pod Φlßnkem). Ve vÜech t∞chto prohlφ₧eΦφch zßrove≥ funguje i p°ednahrßnφ druhΘho obrßzku (samoz°ejm∞, pokud zde nenφ n∞jak nestandardn∞ nastavena cache, v takovΘm p°φpad∞ zde ale obvykle nefunguje p°ednahrßnφ ani u roleΦk∙ realizovan²ch JavaScriptem).
NßÜ odkaz bude zßrove≥ p°φstupn² jak²mkoli prohlφ₧eΦem. Nevizußlnφ prohlφ₧eΦ pou₧ije alternativnφ text z obrßzku, stejn∞ jako vizußlnφ prohlφ₧eΦ s vypnut²m zobrazovßnφm obrßzk∙ û zde se ₧ßdn² roleΦek samoz°ejm∞ nepou₧ije, ale u₧ivatel i tak bude moci odkaz bez problΘm∙ pou₧φt. Prohlφ₧eΦ bez odpovφdajφcφ podpory CSS zobrazφ pouze prvnφ obrßzek a roleΦek takΘ nepou₧ije.
A v Φem je roleΦek vytvo°en² pomocφ CSS lepÜφ ne₧ klasick² javascriptov²? Hlavn∞ dφky n∞mu nemusφme zapojovat ₧ßdn² JavaScript a roleΦek z∙stane tam, kde je jeho mφsto, tedy v prezentaΦnφ vrstv∞ strßnky (styly). ╪eÜenφ vyu₧φvajφcφ CSS je takΘ kratÜφ (co do pou₧it²ch znak∙) ne₧ to javascriptovΘ.
Postup vytvo°enφ roleΦku, kter² jsem vßm prßv∞ ukßzal, jsem shrnul do ukßzkovΘho p°φkladu.
Rozchozenφ roleΦk∙ v Microsoft Internet Exploreru 5.x
Ze zßhadn²ch d∙vod∙ vytvo°φ MSIE 5.x roleΦky jen v tom p°φpad∞, ₧e odkaz je °ßdkov² a nejsou mu nastaveny rozm∞ry û p°i stavu "hover" ale musφ b²t p°em∞n∞n na blokov² a musφ mu b²t nastaveny rozm∞ry. Ostatnφ prohlφ₧eΦe ale pot°ebujφ mφt zadanΘ rozm∞ry v obou p°φpadech, tak₧e musφme zm∞nit pravidla pro prvek <a>:
background: url("button2.gif") no-repeat;
di\splay: block;
wid\th: 164px; heigh\t: 82px;
}
#button a:hover {
background-position: 0 0;
display: block;
width: 164px; height: 82px;
}
V prvnφm pravidle p°eΦtou deklarace vlastnostφ display, width a height jen ty prohlφ₧eΦe, kterΘ ovlßdajφ escape-sekvence v CSS a mezi n∞ MSIE 5.x nepat°φ. MSIE 6+, Mozilla, Opera 7+ a dalÜφ, po strßnce CSS vysp∞lΘ prohlφ₧eΦe, p°i°adφ rozm∞ry odkazu ji₧ zde. V druhΘm pravidle potom nastavujeme tyto vlastnosti i pro MSIE 5.x.
Cel² k≤d na vytvo°enφ roleΦku fungujφcφho ve vÜech modernφch prohlφ₧eΦφch tedy vypadß takto:
position: relative;
z-index: 0;
}
#button a {
background: url("button2.gif") no-repeat;
di\splay: block;
wid\th: 164px; heigh\t: 82px;
}
#button a img {
border: 0;
}
#button a:hover {
background-position: 0 0;
display: block;
width: 164px; height: 82px;
}
#button a:hover img, #button a:focus img {
position: relative;
z-index: -1;
}
M∙₧ete se podφvat i na kompletnφ p°φklad druhΘho roleΦku nebo si stßhnout oba p°φklady zazipovanΘ.
A to je vÜe. A₧ tedy p°φÜt∞ budete d∞lat na n∞jakΘm webu roleΦkovou navigaci, m∙₧ete s klidem vyu₧φt mo₧nostφ CSS a na JavaScript v tomto p°φpad∞ zapomenout.
