Rollover 3krát jinak podle XHTML a CSS
V poslední době se často setkávám na různých webech s názorem, že známý Rollover se dá zcela nahradit kombinací XHTML a CSS. Podívejme se tedy, jak je to ve skutečnosti.
Rollover (záměna obrázku za jiný při přejetí kurzorem) je dozajista jedním z nejčastěji používaných efektů na webových stránkách. Asi nebudu daleko od pravdy, když řeknu, že většina začátečníků v JavaScriptu se tento trik naučí jako jeden z prvních. Ve dnešní (chvályhodné) době standardů XHTML a CSS je pochopitelná snaha vytvořit Rollover pouze pomocí těchto technologií. Jsou na toto ovšem prohlížeče již připraveny? Odpověď se budu snažit najít v tomto článku. Příklady byly testovány na IE 5.5, Opera 6.01 a Mozilla 1.0. Možnosti tvorby Rolloveru zmíněné v tomto článku si můžete vyzkoušet.
Postupů tvorby CSS Rolloveru je několik:
Rollover poprvé
Nejdříve zde uvedu asi nejčastěji zmiňovaný prříklad rolloveru pomocí CSS. Jak možná tušíte, bude využita pseudotřída a:hover. Nejdříve si pomocí XHTML zadefinujeme samotné tlačítko/odkaz:
Soubor dot.gif představuje nejlépe 1 transparentní pixel, který je roztažen na potřebné rozměry buď pomocí XHTML atributů width a height (jako v tomto příkladě) nebo pomocí CSS. Dalšími soubory, které budeme potřebovat, jsou obrázky off.gif (standardní tlačítko) a on.gif (tlačítko při najetí myši). Zbytek práce se již odehraje v CSS:
{background-image: url(off.gif);}
a#btn:hover img
{background-image: url(on.gif);}
Toť vše. Základem tohoto mechanismu je tag img obsahující průhledný pixel roztažený na velikost shodnou s obrázky on.gif a off.gif, který je uzavřen do odkazu a s unikátním identifikátorem id="btn". Pomocí CSS je tomuto průhlednému obrázku přiřazeno taktéž obrázkové pozadí off.gif. Po najetí myši je toto pozadí zaměněno za on.gif.
Na první pohled se zdá vše v pořádku. Vše je podle standardů, srozumitelné a bez použití JavaScriptu. Poněkud horší je to se zobrazitelností. V IE 5.5 se vše zobrazí jak má a rollover funguje. Stejně tak Mozilla 1.0 vyvázla z této zkoušky s čistým štítem. Bohužel Opera 6.01 nejenže tento rollover ignoruje, ale navíc nezobrazí obrázek žádný, což je asi ta nejhorší varianta vůbec. Opera pravděpodobně vůbec nepředpokládá, že by pod obrázkem img mohlo být ještě obrázkové pozadí. Proto se mi tato možnost nezdá příliš použitelnou. Nezobrazené odkazy činí stránku v podstatě nefunkční. Výjimkou je pochopitelně intranet s prohlížečem, ve kterém tento postup funguje.
Chytřeji podruhé
V předchozím případě byl hlavním problémem tag img. Pokusme se daný problém maximálně zjednodušit a Rollover vytvořit pouze pomocí tagu a:
...a k němu příslušný CSS kód:
{width: 50px;
height: 50px;
display: block;
background-image: url(off.gif);}
a#btn:hover
{background-image: url(on.gif);}
Takto vytvořený Rollover se již chová o poznání lépe. IE 5.5 ani Mozilla 1.0 nemají s tímto postupem žádný problém. Opera opět trochu pokulhává. Obrázek vykreslí, ale při najetí myši se ztratí a nezobrazí se obrázek on.gif. Toto chování má sice také k ideálnímu stavu daleko, ale je přijatelnější.
Potřetí o kus dál
Zde se jedná o speciální případ Rolloveru (dá-li se to ještě takto nazvat), kdy se při najetí mění pouze barva pozadí nějakého obrázku. Mějme tedy částečně transparentní obrázek button.gif, který bude reprezentovat daný odkaz/tlačítko. Pak není nic jednoduššího než:
{background-color: blue;
display: block;
width: 50px;
height: 50px;}
a#roll:hover
{background-color: red;}
Tento postup funguje bezchybně IE 5.5, Mozille 1.0 i Opeře 6.01. Toto řešení nejen že ušetří místo (místo dvou obrázků postačí jeden transparentní), ale navíc vás zbaví několika v tomto případě zbytečných skriptů a je přehlednější. Navíc vždy máte jistotu, že se zobrazí přinejhorším alespoň základní obrázek, takže stránka zůstane pořád čitelná.
Výhody a nevýhody
Největší výhodou CSS Rolloveru je to, že si vystačí s (X)HTML a CSS a nepotřebuje JavaScript. Kód se tak stává o dost srozumitelnější a přehlednější. Při zmíněné 3. možnosti Rolloveru navíc dojde i ke snížení počtu stahovaných dat, neboť místo dvou obrázku používá jen jeden (naneštěstí jde pouze o speciální případ). Další výhodou, o které jsem se zatím vůbec nezmínil, je skutečnost, že CSS mimo pseudotřídy a:hover definuje i a:active a a:visited, což znamená, že můžete nadefinovat i různé obrázky pro např. již navšívený odkaz, což je pomocí JavaScriptu jen těžko uskutečnitelné. Nevýhody jsou nasnadě. Sice se mi nakonec podařilo vytvořit Rollover pomocí CSS použitelný na všech testovaných prohlížečích, je ale pravděpodobné, že starší prohlížeče budou mít problémy.
Pokud bych si měl vybrat nyní, zůstal bych u konzervativního Javascriptu, který mi zaručí alespoň zobrazení základního obrázku v každém prohlížeči. V určitých situacích bych ale zvažoval použití 3. možnosti tvorby Rolloveru (u tlačítek, kde lze tento postup použít). Přesto je ale kombinace XTHML+CSS při tvorbě Rolloveru slibná do budoucna.
