Rollover 3krát jinak podle XHTML a CSS

13. září 2003

•

Rollover, neboli 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. V dnešní době standardů XHTML a CSS je pochopitelná snaha vytvořit rollover pouze pomocí těchto technologií. V tomto článku se pokusím ukázat několik možností, jak CSS rollover vytvořit, a otestovat je v jednotlivých prohlížečích, konkrétně MSIE 5.5, MSIE 6, Opera 6.05, Opera 7.11 a Mozilla 1.4.

Všechny zde uvedené příklady si můžete vyzkoušet.

Rollover poprvé

Nejdříve zde uvedu asi nejčastěji zmiňovaný příklad rolloveru pomocí CSS. V XHTML si zadefinujeme samotné tlačítko/odkaz: <a href="http://interval.cz" id="btn"><img src="dot.gif" width="50" height="50" alt="interval.cz" /></a>.

Soubor dot.gif představuje nejlépe jeden 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:

a#btn img
{background-image: url(off.gif);}
a#btn:hover img
{background-image: url(on.gif);}

Toť vše. Základem tohoto mechanismu je element 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 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. Mozilla zvládla tento efekt bez jakýchkoliv problémů. Oba Explorery jsou na tom podobně, občas se ale stane, že po odjetí kurzoru z plochy tlačítka se obrázek nepřeklopí do původního off.gif. Obvykle k tomu dojde při odjetí kurzoru ve vertikálním směru. Šestková verze Opery takto vytvořený rollover úplně ignoruje a navíc nezobrazí ani původní obrázek off.gif. Pravděpodobně vůbec nepředpokládá, že by pod obrázkem img mohlo být ještě další obrázkové pozadí. Ve své sedmičkové verzi se Opera ovšem polepšila a zvládá takto vytvořený rollover na jedničku.

Chytřeji podruhé

Předchozí řešení je sice pro novější prohlížeče srozumitelné, ale není zrovna příliš sémanticky správné. Pokusme se tedy vytvořit rollover pouze pomocí elementu a:

…a k němu příslušný CSS kód:

a#btn
  {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. Téměř všechny testované prohlížeče s ním neměly žádný problém až na starší Operu 6.05, která 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ší než předchozí případ.

Podobně jako předchozí řešení i toto v sobě skrývá jednu podstatnou vadu. Při vypnutém CSS se obrázkový odkaz nezobrazí vůbec. Tato situace se dá ale poměrně elegantně vyřešit:

<a href=“http://interval.cz“ id=“btn“><span>interval.cz</span></a>

Nyní v CSS zakážeme zobrazování textového odkazu:

a#btn
  {width: 50px;
  height: 50px;
  display: block;
  background-image: url(off.gif);}
a#btn:hover
  {background-image: url(on.gif);}
a#btn span
  {display: none;}

Idea konstrukce tohoto rolloveru je jednoduchá. Pokud dané zařízení podporuje CSS, zobrazí se obrázkový odkaz i s rollover efektem a textový odkaz je vypnut. Pokud CSS není k dispozici, objeví se klasický textový odkaz.

Do třetice všeho dobrého

Zde se jedná o častý případ rolloveru, 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ž:

    a#roll img
      {background-color: blue;}
    a#roll:hover img
      {background-color: red;}
…
<a href=“http://interval.cz“ id=“roll“><img src=“button.gif“ alt=“interval.cz“ /></a>

Tento postup využívá jednoduchého triku, kdy mění barvu pozadí obrázku s transparentními plochami. Mozilla i Opera 7.11 jej zvládají bez problémů. MSIE 5.5, MSIE 6 a Opera 6.05 správně zobrazí obrázkový odkaz s modrým pozadím, ale nezvládají už změnu barvy na červenou.

Výhody a nevýhody

Největší výhodou CSS rolloveru je bezesporu to, že si vystačí s (X)HTML a CSS a nepotřebuje JavaScript. Kód se tak stává o dost srozumitelnějším a přehlednějším. Při zmíněné třetí možnosti konstrukce rolloveru navíc dojde i ke snížení objemu stahovaných dat, neboť místo dvou obrázků stačí jen jeden. Další výhodou, o které jsem se zatím vůbec nezmínil, je skutečnost, že CSS mimo pseudotřídy :hover definuje i :active a :visited. Můžete tedy nadefinovat různé obrázky pro různé stavy odkazů, což je pomocí JavaScriptu jen těžko uskutečnitelné. Nevýhody jsou nasnadě. Řešení pomocí kaskádových stylů je sice elegantní, ale není zdaleka bezproblémové. Především starší prohlížeče si s ním příliš rozumět nebudou a i ty novější mají občas problémy.

Výhled do budoucna

Doporučení CSS3 nám přináší naději, že budeme moci skloubit univerzálnost kaskádových stylů se silou klientského skriptování, a to pomocí BECSS (Behavioral CSS). Jednoduše řečeno, jde o technologii, jak pomocí klasických CSS selektorů přiřazovat elementům i chování vyjádřené v klientském skriptovacím jazyce. Pokud chcete vědět, jak jsou na tom prohlížeče s přiřazováním skriptů pomocí CSS nyní, doporučuji vám článek Přiřazení skriptu stylem.

Pozn. red.: Tento článek vyšel poprvé 6. 9. 2002. Původní verze článku a k němu vedené diskuse jsou vám k dispozici v ZIP archivech.