English-only | Jenom česky | Bilingual/Dvojjazyčně

Řešení CSS: Náhrada textu obrázkem

Na webových stránkách občas chceme mít text v dekorativní podobě, do které prostý text nedokážeme zformátovat. Proto text nahradíme obrázkem s grafickou podobou textu. Tyto obrázky ale mají obvykle čistě dekorační charakter (nenesou žádnou informaci) a z hlediska sémantiky je nežádoucí, aby byly v kódu. Měly by patřit do předpisu stylů, ne do stránky samotné. Jak to ale udělat?

1. Prosté řešení

"Odsunout" obrázek do CSS není zas tak složitou záležitostí. Stačí prvku s textem nastavit rozměry kopírující rozměry obrázku. Ten pak prvku nastavíme jako obrázek na pozadí. Aby text obrázek nepřekrýval, uzavřeme text do neutrálního prvku (span), který v CSS skryjeme.

   #chapter-one {
      margin:0; padding:0;
      width:200px; height:80px;
      background:url("chapter-one.gif") top left no-repeat;
      }
   #chapter-one span { display:none }
   
...
   
   <h2 id="chapter-one"><span>Chapter One</span></h2>

Konkrétní použití si prohlédněte na příkladu 1.

Toto řešení má ale jednu nevýhodu — pokud prohlížeč nedokáže zobrazit obrázky (nebo bude použitý obrázek nedostupný), nezobrazí se zhola nic, protože jediný text jsme s CSS skryli. Proto může lepší o něco komplikovanější postup:

2. Kompatibilnější řešení

Idea, jak zajistit, aby byl prvek funkční i s nedostupným obrázkem, je následující. Do neutrálního prvku span text neuzavřeme, ale umístíme jej vedle něj. Tento span zůstane prázdný, ale zformátujeme jej s obrázkem na pozadí a absolutně jej napozicujeme tak, že původní text zakryje.

   #chapter-one {
      margin:0; padding:0;
      position:relative;
      width:200px; height:80px;
      overflow:hidden;
      }
   #chapter-one span {
      display:block;
      position:absolute; left:0; top:0; z-index:1;
      width:200px; height:80px;
      margin:0; padding:0;
      background:url("chapter-one.gif") top left no-repeat;
      }

...

   <h2 id="chapter-one">Chapter One<span></span></h2>

Použití demonstruje příklad 2. V tomto případě bude viditelný text, pokud obrázek z jakéhokoli důvodu nebude možné zobrazit. V opačném případě bude text překryt. Pro na situaci, kdy by text byl výrazně delší, než je rozměr obrázku má prvek nastaven overflow:hidden (jinak by text pod obrázkem "vykukoval").

Pozn.: Obdobně můžeme zpracovat i odkazy. Z prvku A uděláme blok a naložíme s ním stejně jako s nadpisem v předchozích příkladech. Můžeme doplnit i druhý obrázek pro stav A:hover. Více viz v příkladu 3. (Pochopitelně můžeme zde použít také jednoobrázkový rollover)