<p id='prepend'>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.</p>
<p>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:</p>
<p>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₧ <code><div></code>, 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.</p>
<h3>Princip °eÜenφ</h3>
<p>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 <code><a></code>. Za normßlnφch okolnostφ tedy bude zakryt obrßzkem, kter² se vlo₧φ dφky prvku <code><img></code>. 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>
<p>P°ikroΦme k praktickΘmu provedenφ. ZaΦneme tφm jednoduÜÜφm, tedy nastylovßnφm odkazu:</p>
<div class='sample'>
#button a {
<br /> background: url("button2.gif") no-repeat;
<br /> display: block;
<br /> width: 164px; height: 82px;
<br />}
</div>
<p>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 <code>display</code> 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:</p>
<div class='sample'>
#button a img {
<br /> border: 0; /* zruÜenφ °ßmeΦku kolem obrßzku */
<br />}
</div>
<p>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 <code>z-index</code>, kterou p°i stavu "hover" odkazu nastavφme na <samp>-1</samp>:</p>
<div class='sample'>
#button a:hover img, #button a:focus img {
<br /> z-index: -1;
<br /> position: relative;
<br />}
</div>
<p>Vlastnost <code>z-index</code> 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 <code>z-index</code> i pro nßÜ <code><div></code>, dφky Φemu₧ se obrßzek bude posouvat za n∞j:</p>
<div class='sample'>
#button {
<br /> position: relative;
<br /> z-index: 0;
<br />}
</div>
<p>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.</p>
<p><em>Poznßmka</em>: 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 <kbd>TAB</kbd>).</p>
<h3>Chyba v Internet Exploreru 6</h3>
<p>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">:</p>
<div class='sample'>
#button a:hover {
<br /> background-position: 0 0;
<br />}
</div>
<p>Jak vidφte, zm∞nili jsme hodnotu vlastnosti <code>background-position</code>. Jejφ v²chozφ hodnotou je <samp>0% 0%</samp> û ta mß ale naprosto stejn² v²znam jako <samp>0 0</samp>.</p>
<h3>Suma sumarum</h3>
<p>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).</p>
<p>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.</p>
<p>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Θ.</p>
<p>Postup vytvo°enφ roleΦku, kter² jsem vßm prßv∞ ukßzal, jsem shrnul do <a href='podklady/snizek/789/css-rollovers-1.html'>ukßzkovΘho p°φkladu</a>.</p>
<h3>Rozchozenφ roleΦk∙ v Microsoft Internet Exploreru 5.x</h3>
<p>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 <code><a></code>:</p>
<div class='sample'>
#button a {
<br /> background: url("button2.gif") no-repeat;
<br /> di\splay: block;
<br /> wid\th: 164px; heigh\t: 82px;
<br />}
<br />
<br />#button a:hover {
<br /> background-position: 0 0;
<br /> display: block;
<br /> width: 164px; height: 82px;
<br />}
</div>
<p>V prvnφm pravidle p°eΦtou deklarace vlastnostφ <code>display</code>, <code>width</code> a <code>height</code> 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.</p>
<p>Cel² k≤d na vytvo°enφ roleΦku fungujφcφho ve vÜech modernφch prohlφ₧eΦφch tedy vypadß takto:</p>
<div class='sample'>
#button {
<br /> position: relative;
<br /> z-index: 0;
<br />}
<br />
<br />#button a {
<br /> background: url("button2.gif") no-repeat;
<br /> di\splay: block;
<br /> wid\th: 164px; heigh\t: 82px;
<br />}
<br />
<br />#button a img {
<br /> border: 0;
<br />}
<br />
<br />#button a:hover {
<br /> background-position: 0 0;
<br /> display: block;
<br /> width: 164px; height: 82px;
<br />}
<br />
<br />#button a:hover img, #button a:focus img {
<br /> position: relative;
<br /> z-index: -1;
<br />}
</div>
<p>M∙₧ete se podφvat i na <a href='podklady/snizek/789/css-rollovers-2.html' title='druh² p°φklad'>kompletnφ p°φklad druhΘho roleΦku</a> nebo si stßhnout <a href='podklady/snizek/789/css-rollovers.zip'>oba p°φklady zazipovanΘ</a>.</p>
<p>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.</p>
<li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3280' title='(36 komentß°∙)'>Interval.cz a jeho Φtenß°i</a></li>
<li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3296' title='(30 komentß°∙)'>PHP pro pokroΦilΘ - znovu t°φdy a objekty</a></li>
<li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3301' title='(24 komentß°∙)'>Kompletnφ pr∙vodce XSLT - ·vod do problematiky</a></li>
<li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3276' title='(21 komentß°∙)'>Webovß grafika podle TomßÜe BarΦφka</a></li>
