Obrázky

Pro vložení obrázku slouží nepárový element img. Povinnými atributy jsou src, jehož hodnotou je název obrázku, případně i s cestou a alt obsahující alternativní text, který se zobrazí, pokud je obrázek prohlížeči nedostupný, buď proto, že se na zadané adrese nenachází nebo proto, že prohlížeč obrázky nezobrazuje. Alternativní text by měl tedy nějakým způsobem příblížit co je na obrázku těm, kteří jej nevidí.

<img src="obrazky/obrazek.jpg" alt="Obálka HTML příručky" />

Obrázky na webu bychom měli na webu používat opatrně. Kromě výběru vhodných obrázků je třeba dbát na jejich datovou velikost, zdaleka ne každý si může dovolit prohlížet stránky, jejichž velikost se dá počítat v megabytech. Obrázky, které nemají jinou funkcni než „zlepšení designu“ stránky by měli být vkládány pouze pomocí CSS stylu a to jako obrázek na pozadí.

Velikost obrázku

Velikost obrázku není povinné zadávat, přesto je velkou chybou toto opomenout. Pokud totiž velikost obrázku nezadáte, prohlížeč si na jeho zobrazení nevyhraní dostatečny prostor a jelikož okolní text se samozřejmě načte dřív než obrázek (protože je co se týče velikosti dat menší), způsobí to jakési „poskakování” stránky ve chvíli, kdy se začínají načítat obrázky, které potřebují více prostoru než mají a okolní text jim vlastně musí uhýbat.

Stejně tak je vhodné zadávat obrázku jeho skutečnou velikost, nezmenšovat ani nezvětšovat pomocí prohlížeče, ale pomocí grafického editoru. Pokud totiž obrázek o velikosti např. 100×100 pixelů zmenšíme v prohlížeči na 50×50, docílíme tak sice požadované velikosti, ale uživatel bude zbytečně stahovat více dat, protože bude stahovat samozřejmě obrázek v původní velikosti.

Pro určení velikosti obrázku se používají atributy width (šířka) a height (výška) nebo stejnojmenné vlastnosti v CSS.

Obrázková mapa

Obrázkové mapy využijeme například pro různé navigační lišty. Je to obrázek, jehož jednotlivé části mají sloužit jako odkazy na různá místa. Mapa se vytváří pomocí elementu map. Jeho povinným atributem je id, což je atribut sloužící jako identifikátor této mapy. Jeho hodnotou je tedy nějaký textový řetězec, s kterým se později bude obrázek této mapy dovolávat.

Element map obsahuje libovolný počet (nejméně jeden) elementů area, které vymezují prostor z obrázku, který bude odkazem a určují kam bude odkazovat. Tvar hranice aktivní oblasti (tj. místo, na které budeme moci kliknout a odkázat se na daný dokument) určuje atribut shape. Jeho hodnotou je buď rect (obdélník), poly (mnohoúhelník) nebo circle (kruh).

Konkrétní vymezení oblasti je dáno v atributu coords. Jeho hodnotou jsou čísla oddělená čárkou, která definují vrcholy n-úhelníku. V případě obdélníku je to v pořadí: souřadnice x levého horního rohu, souřadnice y levého horního rohu, souřadnice x pravého dolního rohu, souřadnice y pravého dolního rohu. Obdobně po sobě budou následovat všechny vrcholy mnohoúhelníku. V případě kružnice jsou zadávána čísla v pořadí: souřadnice x středu, souřadnice y středu, poloměr kružnice.

Pozn.: Počátek soustavy souřadnic je v levém horním rohu, tedy levý horní roh má souřadnice [0,0]. Souřadnice x roste ve směru zleva doprava, souřadnice y ve směru shora dolů.

Povinným atributem u area je alt a neméně důležitým href, který určuje cíl odkazu. Takto můžeme tedy rozdělit obrázek na několik aktivních oblastí. Mapa je již vytvořená, stačí jen říct obrázku, aby ji použil. Toho docílíme pomoci atributu usemap (atribut tagu img). Jeho hodnotou bude tentýž řetězec, jaký jsme použili v tagu map u atributu id. A teď už jen zbývá si to všechno sepsat na konkrétním příkladě:

<map id="mapa" name="mapa">
        <area href="#1" alt="část 1" coords="0,0,33,31" />
        <area href="#2" alt="část 2" coords="34,0,66,31" />
        <area href="#3" alt="část 3" coords="67,0,98,31" />
</map>

<img src="obrazkova_mapa.gif" alt="obrázková mapa"
          width="98" height"31" usemap="#mapa" />

Pozn.: Atribut name je použit kvůli nové verzi Firefoxu, který zřejmě chybně zpracovává id.

Výsledná obrázková mapa tedy bude vypadat takto:

A můžete vidět, že každá ze tří částí obrázku skutečně odkazuje jinam.

Flash

Pokud by snad někdo měl problém se zachováním striktního XHTML vložit flash, tak tady přikládám kód ;-)

<object
    type="application/x-shockwave-flash" data="flash.swf"
    width="100" height="40" >
    <param name="movie" value="flash.swf"  />
</object>