| Výuka > Grafika pro WWW > Imagemapy |

Imagemapy (obrazové nebo klikací mapy)

Imagemapa je obrázek, jehož některé části se chovají jako hypertextové odkazy. V současné době se pomalu upouští od používání Imagemap a obrázky jsou raději rozřezány na menší celky, což umožňuje jejich rychlejší načítání. Vytvoření Imagemapy z obrázku není nijak snadná záležitost. Musí se přesně nadefinovat oblasti, které budou aktivní. Definice se provádí s ohledem na souřadnice obrázku. Aby autor stránek s Imagemapou nemusel provádět tyto výpočty souřadnic, je vhodnější použít některou aplikaci, která velmi pohodlným způsobem tuto Imagemapu dokáže vytvořit i s příslušným HTML kódem. Použití Imagemapy je mnohdy ale nejlepším řešením např. pro navigaci po stránkách.

Na internetu je spousta nástrojů pro tvorbu Imagemap, většinou ve shareware či placených verzích. Pokud chcete velmi jednoduše vytvořit nějakou Imagemapu, na adrese http://jindrich.com/ime-jas/ime-jas.html je velice pěkný editorek, využívající možností JavaScriptu, ale co je nejdůležitější - je zadarmo.

Ovládání Image Map Editoru je velmi prosté. Stačí tlačítkem Procházet zvolit obrázek, ze kterého chcete vyrobit Imagemapu, zadat tvar oblasti (rect = obdélník, circle = kruh nebo poly = mnohoúhelník), na obrázku pak klikáním myší vybrat příslušné souřadnice (Coords), zadat URL adresu (Href) a tlačítkem Add přidat vytvořenou oblast do mapy. Po zadání všech aktivních oblastí mapy vyvoláte tlačítkem Finish zobrazení výsledné mapy na konkrétním obrázku. Pak již stačí zkopírovat obsah textového pole do schránky a vložit jej do vaší WWW stránky.

Na závěr by bylo vhodné popsat, co editor vytvoří a které značky HTML jsou k tomu určené.

<img src="URI_obrázku" usemap="#název_mapy"
     width="šířka_celého_obrázku"
     height="výška_celého_obrázku" />
<map name="#název_mapy">
 <area shape="typ_oblasti"
       coords="souřadnice"
       alt="alternativní text oblasti"
       href="URL_adresa" />
</map>

Jednotlivé aktivní oblasti jsou zapsány značkou <area />. Parametrem shape=" " definujete druh oblasti, parametrem coords=" " zadáváte příslušné souřadnice a parametrem href=" " odkaz na URL adresu.

Následující tabulka ukazuje použití typu oblasti a souřadnic.

oblast parametry
kruhová shape="circle" coords="x, y, r"
obdélníková shape="rect" coords="x1, y1, x2, y2"
mnohoúhelníková shape="poly" coords="x1, y1, x2, y2, ..."

x a y jsou souřadnice (u polygonu a obdélníku souřadnice bodů, u kruhu souřadnice středu) a r je poloměr u kruhové oblasti.

Pro úplnost ještě uvádím jeden velmi jednoduchý nástroj s názvem Imagemapic, který je šířen jako freeware o velikosti cca 55 kB.

30.08.2007, 22:16 vytvořil Administrator