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:

  • rectvodorovná pozice levé hrany, svislá pozice horní hrany, vodorovná pozice pravé hrany, svislá pozice dolní hrany
  • circlevodorovná 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.
  • polyvodorovná 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:

<p>Vyberte zemi, o které se chcete něco dozvědět:</p>
<p><img src=“mapa.gif“ alt=“Politická mapa Evropy“ usemap=“#evropa“ /></p>

<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“>
<p>
  <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>
</p>
</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:

<object data=“mapa.gif“ type=“image/gif“ usemap=“#evropa“>
<map id=“evropa“>
<p>
  <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>
</p>
</map>
</object>

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

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

Předchozí článek On-line portrét: Dánsko (.dk)
Další článek hockicko
Štítky: Články

Mohlo by vás také zajímat

Nejnovější

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *