XHTML – klientské image-mapy

17. dubna 2003

•

Klientské image-mapy jsou mechanismem, který umožňuje pomyslně rozdělit externí objekt (obrázek) na určité oblasti a každé oblasti přiřadit jistou akci, například přechod na jinou stránku nebo spuštění skriptu. Po kliknutí na obrázek se podle místa kliknutí tato akce provede.

Z předchozího vyplývá, že klientské image-mapy jsou svázány s podporou obrázků a určitého ukazovacího zařízení v interpretovi XHTML. Ačkoli interpret může uživateli nabídnout jednotlivé oblasti image-mapy jiným způsobem, neměli byste se na to spoléhat a raději zpřístupněte akce vyvolatelné prostřednictvím image-mapy i jiným způsobem, například seznamem odkazů.

Klientská image-mapa se skládá z definice oblastí a jim přidružených akcí – tato definice se poté asociuje s příslušným obrázkem. Provedení akce u klientské image-mapy není závislé na serveru (na rozdíl od serverových image-map) a akce proto může proběhnout neprodleně.

Element map – definice klientské image-mapy

Povolený obsah: ((%block; | form | %misc;)+ | area+)

Atributy:

%i18n;: Tato parametrická entita obsahuje atributy internacionalizace – lang, xml:lang a dir.
%events;: Tato parametrická entita obsahuje základní atributické ovladače událostí – onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown a onkeyup).
id ID #REQUIRED: Tento atribut obsahuje jedinečné jméno elementu v celém dokumentu. Narozdíl od jiných elementů je ale v tomto případě povinný a specifikuje navíc jméno mapy pro odkazování se na ni v atributu usemap elementů img, object a input.
class CDATA #IMPLIED: Pomocí tohoto atributu můžeme element přiřadit do jedné nebo více tříd.
style %StyleSheet; #IMPLIED: Pomocí tohoto atributu můžeme danému elementu nastavit vizuální, popřípadě hlasové vlastnosti prostřednictvím implicitního stylového jazyka (ten se udává pomocí elementu meta v hlavičce).
title %Text; #IMPLIED: Tento atribut specifikuje popis elementu.
name NMTOKEN #IMPLIED: Tento atribut specifikuje jméno mapy pro odkazování – tento význam již dnes ale náleží atributu id, atribut name se vyskytuje pouze z důvodů kompatibility s HTML a dnes již ho v podstatě nemá cenu uvádět (snad jen kvůli starým prohlížečům). Pokud ho použijete, měl by mít stejnou hodnotu jako atribut id.

Element map v XHTML 1.0 Strict DTD

Tento element uzavírá v dokumentu úsek, kde je definována image-mapa nebo jiný navigační mechanismus. Atributy id a name elementu map obsahují pojmenování mapy pro odkazování se na ni u obrázků.

Jako obsah elementu map je v podstatě definována parametrická entita %Block; (blokové elementy), pouze zde můžeme navíc použít speciální element area pro definici oblastí image-mapy (o tomto elementu budeme mluvit dále v textu). Pokud uvnitř elementu map použijeme jiné elementy než area, jsou interpretovány, jako by byly součástí stránky, a všechny elementy area, které se zde nachází, jsou ignorovány.

Element area – oblasti image-mapy

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).

%focus;

Tato parametrická entita obsahuje atributy specifické pro elementy, které mohou obdržet tzv. fokus – ten se uplatňuje obvykle při procházení stránky klávesnicí (typicky pomocí klávesy Tab). Řadíme sem atributy accesskey, tabindex, onfocus a onblur.

href %URI; #IMPLIED

Tento atribut specifikuje URI adresu odkazovaného zdroje.

nohref (nohref) #IMPLIED

Tento boolean-atribut udává, že daná oblast není odkazem. Pokud vás nenapadá, k čemu by šla taková oblast využít, tak např. k překrytí části aktivní oblasti, aby se dosáhlo požadovaného tvaru.

shape %Shape; "rect"

Tento atribut specifikuje tvar oblasti. Možné hodnoty jsou:

rect – obdelník.
circle – kruh.
poly – mnohoúhelník.
default – celá oblast.

coords %Coords; #IMPLIED

Pomocí tohoto atributu definujete pozici a tvar oblasti. Všechny hodnoty jsou typu %Length; (hodnota v pixelech nebo v procentech – v případě procent je číslo následované znakem % a hodnotou je tato procentuální část z dostupné šířky/výšky), jsou udávány relativně vzhledem k levému hornímu rohu obrázku a liší se v závislosti na tom, jaký tvar jste zvolili atributem shape:

rect – vodorovná pozice levé hrany, svislá pozice horní hrany, vodorovná pozice pravé hrany, svislá pozice dolní hrany
circle – vodorovná pozice středu kruhu, svislá pozice středu kruhu, poloměr kruhu. Pokud je jako poloměr použita hodnota v procentech, použije se tato procentuální část z šířky nebo výšky (použije se hodnota, která je menší) celého obrázku.
poly – vodorovná pozice prvního bodu, svislá pozice prvního bodu, vodorovná pozice druhého bodu, svislá pozice druhého bodu, ... , vodorovná pozice n-tého bodu, svislá pozice n-tého bodu. První a poslední pár souřadnic by měl ukazovat na stejné místo v obrázku, aby byl mnohoúhelník uzavřen. Pokud neukazují tyto páry na stejné místo, interpret XHTML si odvodí další bod tak, aby mohl mnohoúhelník uzavřít.

alt %Text; #REQUIRED

Tento povinný atribut obsahuje alternativní textovou informaci o dané oblasti obrázku. Platí pro něj to samé, co pro atribut stejného jména u elementu img.

Element area v XHTML 1.0 Strict DTD

Element area se vždy nachází uvnitř elementu map. Každý element area definuje jednu oblast image-mapy.

Další možností, jak definovat oblasti image-mapy, jsou elementy a (i ty se ale musí nacházet uvnitř map). Možná si ještě pamatujete, že tyto elementy také obsahují atributy shape a coords – ty se uplatní právě v tomto případě. Vše funguje tak, že odkazy se na stránce normálně zobrazí a navíc ještě definují oblasti image-mapy. Jedná se tedy o řešení, které již automaticky pamatuje na alternativní textovou informaci.

Pokud se oblasti překrývají, platí pro spornou oblast akce definovaná elementem, který se nachází dříve ve zdrojovém kódu dokumentu.

Příklady image-map

Nejprve si vytvoříme image-mapu „klasickým“ způsobem:

Vyberte zemi, o které se chcete něco dozvědět:
<img src=“mapa.gif“ alt=“Politická mapa Evropy“ usemap=“#evropa“ />
…
<map id=“evropa“>
 <area href=“nemecko.html“ alt=“Německo“ shape=“poly“ coords=“185,96,78%,28%,98,21,35,65, …“ accesskey=“N“ title=“Zkratková klávesa N“ />
 <area href=“svedsko.html“ alt=“Švédsko“ coords=“46,23,89,78″ />
 <area href=“albanie.html“ alt=“Albánie“ shape=“circle“ coords=“96,95,30%“ />
 <area alt=“Větší obrázek“ onclick=“loadBigger();“ onkeypress=“loadBigger();“ coords=“56,46,36,26″ title=“K této akci je potřeba zapnutá podpora JavaScriptu v prohlížeči.“ />
</map>

Nyní ji přeměníme tak, aby se zároveň zobrazila i textová navigace:

<map id=“evropa“>

 <a href=“nemecko.html“ shape=“poly“ coords=“185,96,78%,28%,98,21,35,65, …“ accesskey=“N“ title=“Zkratková klávesa N“>Německo</a> |
 <a href=“svedsko.html“ coords=“46,23,89,78″>Švédsko</a> |
 <a href=“albanie.html“ shape=“circle“ coords=“96,95,30%“>Albánie</a> |
 <a href=“#“ onclick=“loadBigger(); return false;“ onkeypress=“loadBigger(); return false;“ coords=“56,46,36,26″ title=“K této akci je potřeba zapnutá podpora JavaScriptu v prohlížeči.“>Větší obrázek</a>

</map>

Všimněte si oddělovacích znaků – v případě, že máte více odkazů na jedné řádce, měli byste je od sebe oddělit podobným znakem, aby nedošlo k jejich splynutí. Dalším řešením by mohlo být uzavření odkazů do neuspořádaného seznamu (element ul), protože se jedná o seznam odkazů – potom bychom již oddělovací znaky používat nemuseli.

Ale vraťme se k naší image-mapě. Někdy si můžeme také přát, aby se textová navigace zobrazila pouze pokud není zobrazena image-mapa:

Jak vidíte, využíváme toho, že obsah elementu object je interpretován pouze tehdy, pokud nemůže být daný objekt zobrazen.

K image-mapám je to již tedy vše. Jedná se o vcelku specifický prvek XHTML. Při jeho užívání byste vždy měli být obezřetní a nikdy byste se na něj neměli stoprocentně spoléhat, protože jeho používání může být pro leckteré uživatele značně obtížné, ne-li nemožné.