Vytvoření odkazu z obrázku vloženého v rámci tagu img není nic složitého, stačí pouze v kódu zápis obalit s pomocí a. Jak však postupovat, když chceme povolit prokliknutí jen na určitých místech? Velmi jednoduchý postup představuje zavedení tzv. klikací mapy.

Zmíněná mapa využívá tag map s atributem name, který je velmi důležitý, protože udává pojmenování, s jehož pomocí se následně klikací oblast propojí s obrázkem. Uvnitř mapy nalezneme tagy prozrazující konkrétní místa chovající se jako odkazy. Jejich cíl určuje href. Definovat se dále musí tvar prokliknutelného objektu s pomocí shape. Obvykle se zde nachází rect z anglického rectangular, tedy obdélník. Vytvořit lze dále i kruh. O nepravidelné tvary se postará hodnota polygon udávající nasazení mnohoúhelníku. Coords popisuje konkrétní pozici, v případě obdélníku zadáváte v pixelech souřadnice levého horního a pravého dolního rohu. U kruhu určíte pouze střed a poloměr. Jak správně tušíte, nejvíce práce nastává u mnohoúhelníku, kdy nezbývá než definovat jednotlivé body – vrcholy. Dosud jsem si však vždy vystačil s obyčejným obdélníkem.

Konkrétní HTML pak může vypadat například následovně:

<map name="JmenoMapy">
<area href="index.php" shape="rect" coords="5, 5, 20, 20">
<area href="login.php" shape="rect" coords="25, 25, 50, 50">
</map>

<img src="obrazek.png" usemap="#JmenoMapy" width="100" height="100">

Povšimněte si atributu usemap u obrázku, který s hashtagem odkazuje na mapu.

Tip na automatický nástroj

Dost bylo teorie, pojďme k praxi. Nic vám samozřejmě nebrání v nakódování potřebného HTML ručně, osobně však používám online pomůcku, která všechnu práci udělá za mě. Nachází se na image-maps.com a nejprve vás donutí nahrát obrázek, jehož mapu budete tvořit. S pomocí WYSIWYG rozhraní přetáhnete obdélníky na místa, jenž se mají stát odkazem a určíte jejich cíl (atribut href). Po dokončení je automaticky vygenerován HTML kód, který stačí jen zkopírovat. Obsahuje sice odkaz na použitý nástroj, nic vám však nebrání v jeho odstranění.