XHTML – element img

7. dubna 2003

•

V tomto pokračování seriálu o XHTML si popíšeme element img, jeden z nejznámějších a nejpoužívanějších elementů XHTML, který slouží ke vkládání obrázků do stránky.

Element img – vkládání obrázků

Povolený obsah: EMPTY (žádný obsah)

Atributy:

%attrs;

Tato parametrická entita obsahuje další parametrické entity:
%coreattrs; (atributy id, class, style a title),
%i18n; (atributy lang, xml:lang a dir) a
%events; (atributy onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown a onkeyup).

src %URI; #REQUIRED

Hodnotou tohoto povinného atributu je URI adresa obrázku. Na webu můžete bez obav používat formáty PNG, JPEG a GIF.

alt %Text; #REQUIRED

Tento povinný atribut obsahuje alternativní textovou informaci o obsahu obrázku. Ta je důležitá především pro handicapované uživatele a také pro všechna zařízení, která obrázky nezobrazují (např. prohlížeče pro nevidomé, textové prohlížeče, moderní prohlížeče s vypnutými obrázky, vyhledávače…) – v těchto případech je alternativní text použit místo obrázku. Z toho důvodu (a také protože je tento atribut povinný) byste na alternativní text neměli nikdy zapomínat. Tato textová informace by měla mít minimálně stejnou informační hodnotu a účel jako obrázek, nesmí obsahovat pouze doplňující informaci k obrázku. Pokud uvádíte tuto informaci hned za obrázkem, můžete použít jako hodnotu atributu alt prázdný řetězec (alt="").

longdesc %URI; #IMPLIED

V tomto atributu se může nacházet URI adresa dokumentu, který obsahuje alternativní informaci k obrázku (pokud na ni nestačí atribut alt). Jestliže již tento dokument vytvoříte, měli byste na něj uvést i odkaz v blízkosti obrázku (ne každý prohlížeče ovládá atribut longdesc, navíc se tento popis může někdy hodit i běžným uživatelům).

width %Length; #IMPLIED

Tento atribut specifikuje šířku obrázku při vizuálním výstupu. Tato šířka je buď obyčejné číslo a udává hodnotu v pixelech nebo číslo následované znakem % – v tom případě se použije procentuální část dostupné šířky. Pokud je šířka menší či větší než je skutečná šířka objektu, musí být objekt odpovídajícím způsobem zmenšen/zvětšen. Tento atribut byste již neměli příliš používat, ale nahradit ho ve stylech nebo ponechat objektu jeho opravdovou šířku. Jeho užitečnost spočívá hlavně v tom, že prohlížeč může pro obrázek rezervovat místo, i když není ještě nahraný, a pokračovat v zobrazování stránky.

height %Length; #IMPLIED

Tento atribut je shodný s atributem width, ale vztahuje se k výšce.

usemap %URI; #IMPLIED

Hodnotou tohoto atributu je odkaz na image-mapu, pokud má obrázek jako image-mapa sloužit. Image-mapa se definuje buď v externím souboru (v tom případě je hodnotou URI adresa tohoto souboru) nebo přímo v dokumentu – potom je hodnotou odkaz na element map (o tom si povíme něco příště).

ismap (ismap) #IMPLIED

Pokud uvedete tento boolean-atribut a obrázek je součástí odkazu (nachází se uvnitř elementu a), použije se jako tzv. serverová image-mapa (image-mapa je obecně odkaz tvořený obrázkem, jehož obsah je rozčleněn na určité oblasti, přičemž každá oblast je asociovaná s jinou akcí, např. přechodem na určitou stránku). To znamená, že po aktivaci odkazu se prohlížeč přesune na URI odkazu následované souřadnicemi místa kliknutí na obrázku (vodorovná souřadnice x je počítána od levého okraje obrázku, svislá souřadnice y od horního okraje, přičemž obě hodnoty jsou udávány v pixelech) – skript na serveru potom podle těchto souřadnic pošle zpět příslušnou stránku (skriptováním na straně serveru se ale na Intervalu zabývají jiné rubriky).

Pokud např. odkaz vede na http://server.cz/stranka.php a ke kliknutí dojde na souřadnicích x=33 a y=44, potom si interpret XHTML vyžádá URI http://server.cz/stranka.php?33,44. V případě, že interpret nepoužívá vizuální výstup, ukazovací zařízení (myš) nebo z jiných důvodů nemůže získat souřadnice kliknutí (např. protože jsou v prohlížeči vypnuté obrázky), potom automaticky použije souřadnice 0,0 – ty mohou být rozlišeny serverovým skriptem a může být v takovém případě nabídnutá alternativní textová navigace (pokud obrázek tomuto účelu slouží).

I přesto, že serverové image-mapy mohou být vytvářeny s ohledem na uživatele, který je není schopen používat, měli byste vedle nich uvádět na stránce i obyčejné odkazy na stránky, na které se lze dostat image-mapou. Ne každé zařízení se totiž ovládá tak, jak má, navíc se nemusí podařit obrázek ze serveru stáhnout – potom je uživatel na vašem webu ztracen, protože se nemůže dostat na další stránky.

Lepším řešením než serverové image-mapy jsou klientské image-mapy. V tomto případě jsou všechny informace odeslány již spolu se stránkou a interpret XHTML podle nich a místa kliknutí sám určít výslednou URI. Toto řešení je lepší i co do přístupnosti. Klientským image-mapám se budeme věnovat příště.

Element img v XHTML 1.0 Strict DTD

Element img slouží ke vkládání speciálního typu externích objektů, a sice obrázků. Ty jsou pro web typické a jedná se bezesporu o nejčastější externí objekty. Nyní si tedy ukážeme příklad jeho využití:

<p>
<img src=“schemata/nakres.png“ alt=“Nákres konstrukce jaderné bomby.“ longdesc=“alt-nakres.html“ />
<a href=“alt-nakres.html“ title=“popis nákresu konstrukce jaderné bomby“>[popis]</a>
</p>

Stejný efekt ale můžeme dosáhnout i použitím elementu object:

<p>
<object data=“schemata/nakres.png“ type=“image/png“>
Nákres konstrukce jaderné bomby. <a href=“alt-nakres.html“ title=“popis nákresu konstrukce jaderné bomby“>[popis]</a>
</object>
<a href=“alt-nakres.html“ title=“popis nákresu konstrukce jaderné bomby“>[popis]</a>
</p>

Element img však slouží pouze ke vkládání obrázků, které nesou v dokumentu nějakou informační hodnotu, jsou součástí jeho obsahu. Neměli byste ho tedy používat ke vkládání dekorativních obrázků, jako jsou různé odrážky, oddělovací čáry, zakulacené rohy, průhledné vycpávky apod. K těmto účelům slouží pouze styly.

Pokud element img k dekoračním účelům přece použijete, měli byste jako hodnotu atributu alt uvést znaky, které suplují význam objektu, v případě odrážek např. - nebo *, u oddělovacích čar např. --- nebo ___ a u většiny ostatních prázdný řetězec. V žádném případě nepoužívejte nicneříkající texty jako „červený puntík“, „nic“ apod. (tyto texty neinformují uživatele o účelu obrázku).

Na závěr ještě něco k alternativnímu textu obrázku, umísťovaném do atributu alt – jak už jsme si řekli, měl by mít stejnou nebo vyšší informační hodnotu a účel jako obrázek. Např. pro fotku pouště v Egyptě by se hodily takovéto alternativní texty:

Fotky z Egypta: poušť
Fotky z Egypta: poušť (v den, kdy jsem tohle fotil, mi na nádraží ukradli fotoaparát)
Egyptská poušť v poledne

Následující texty by ale byly špatně, protože nenesou celou informační hodnotu obrázku:

Fotky z Egypta
V den, kdy jsem tohle fotil, mi na nádraží ukradli fotoaparát.
Všimněte si hlavně krásné barvy písku!