Popisky obrázků

Jiří Kosek ml.

Vkládání obrázků do HTML stránek je vcelku jednoduché a nabízí nám poměrně volnou ruku. Problém však nastane, pokud chceme obrázek doplnit i jeho popiskem. Element IMG nám nenabízí žádnou možnost specifikovat popisek obrázku tak, jak to známe například u tabulek (pomocí elementu CAPTION). Pokud do textu umístíme jako jeden odstavec popisek obrázku a jako druhý odstavec samotný obrázek, ztratíme tím mnoho z možností pro umístění obrázků (např. obtékání obrázků textem) a navíc se nám při tisku stránky může stát, že popisek se objeví na jiné stránce než samotný obrázek.

K řešení tohoto problému nám výborně poslouží tabulky. U nich lze specifikovat jejich popisek. Vytvoříme tedy tabulku, která bude mít pouze jednu buňku a do této buňky umístíme obrázek. Celé to může vypadat takto:

<TABLE>
<CAPTION>Obr. 1: Plynová turbína</CAPTION>
<TR><TH><IMG SRC="turbina.gif">
</TABLE>

Právě mezi tagy <CAPTION> a </CAPTION> umístíme popisek obrázku. Tagem <TR> zahájíme řádku tabulky a tagem <TH> samotnou buňku. Tag <TH> jsme použili namísto <TD> záměrně -- obrázek bude se svým popiskem vycentrován. (Obsah buňky uvozené tagem <TH> je centrován a popisek tabulky je vycentrován nad celou tabulkou.)

Toto řešení je uspokojivé, lze jej však zlepšovat. První věcí, kterou lze změnit je umístění popisku -- ten se nám normálně zobrazí nad obrázkem. Někdy však potřebujeme popisek umístit pod obrázek -- stačí pak u CAPTION použít atribut ALIGN a přiřadit mu hodnotu BOTTOM.

U širších obrázků je pěkné, pokud jsou vloženy mezi text a jsou vycentrovány. Naopak u užších a menších obrázků je obvykle hezčí, pokud text obtéká kolem nich. Dosáhnout prvního efektu je celkem jednoduché -- stačí celou tabulku použitou pro vložení obrázku s popiskem uzavřít mezi tagy <CENTER> a </CENTER>.

Pokud chceme, aby byl obrázek i s popiskem obtékán textem, použijeme u elementu TABLE atribut ALIGN a přiřadíme mu hodnotu LEFT nebo RIGHT. Obrázek pak bude buď zprava nebo zleva obtékán textem.

U příliš malých obrázků je lepší vyhradit pro ně trochu více místa (aby se z popisku nestala dlouhá nudle). K tomu lze výhodně použít atribut WIDTH u elementu TABLE.

Všechny poznatky si shrneme na následující ukázce. Výsledný vzhled v prohlížeči je na obrázku 1:

 ...
<CENTER>
<TABLE>
<CAPTION ALIGN=BOTTOM>Obr. 1: Velký obrázek na celou šířku
textu</CAPTION>
<TR><TH><IMG SRC="1mbill.gif">
</TABLE>
</CENTER>

<TABLE ALIGN=LEFT>
<CAPTION>Obr 2.: Práce na silnici</CAPTION>
<TR><TH><IMG SRC="work.gif">
</TABLE>

 ...

<TABLE ALIGN=RIGHT WIDTH=30%>
<CAPTION ALIGN=BOTTOM>Obr 3.: Práce na stránce</CAPTION>
<TR><TH><IMG SRC="atwork.gif">
</TABLE>

 ...

Obr. 1: Výsledek ukázkového příkladu