Interval.cz > Webdesign > XHTML > XHTML - klientské image-mapy

XHTML - klientské image-mapy

17. 04. 2003 | Martin Snížek | XHTML | Komentáře: 0

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:

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

---

---

Další aktuální články na interval.cz

• Rychost, rychlost, rychlost - zrychlete své stránky
• Chamurappiho Webylon: čtyři články s kritikou W3C
• Nenápadný cloud: synchronizace dat z prohlížečů
• Pozvánka: Random Hacks of Kindness 2012
• Zajímavost o češtině pro redakční systém WordPress

Tematicky související články

• XHTML - klientské skripty
• XHTML - deklarace prvků XHTML v DTD
• XHTML - tělo dokumentu, kontejnery a odstavce
• XHTML - titulek, skupiny řádků a řádky tabulek
• XHTML - elementy button a textarea

Dejte vědět i ostatním o článku

Diskuse (počet komentářů: 0)

Buďte prvním návštěvníkem, který přidá nový komentář.