Obrázkové mapy jsou již léta základem webdesignu, protože umožňují programátorům vytvářet dynamické a klikací části v rámci obrázku. Obrázkové mapy se v některých kontextech stále často používají, přestože jejich používání v důsledku vývoje sofistikovanějších webových nástrojů pokleslo. V tomto příspěvku se podíváme na mnoho způsobů vytváření obrazových map, včetně nástrojů HTML, JavaScript a Adobe, a řekneme si, jak jsou užitečné v současném prostředí vývoje webových stránek. 1. Použití jazyka JavaScript k vytvoření obrázkové mapy: Obrázkové mapy lze vytvářet dynamicky pomocí JavaScriptu. Pro začátek je zapotřebí soubor HTML s prvkem image a prvkem script. Pomocí metody ‚addEventListener‘ ve skriptu přiřadíte k obrázku událost kliknutí. Obsluha události může zjistit souřadnice kliknutí ve vztahu k poloze obrázku při kliknutí na obrázek. Na základě těchto informací můžete definovat oblasti mapy a přiřadit příslušné akce. Objekt „window.location“ lze například použít k odeslání uživatele na jinou adresu URL v závislosti na oblasti, na kterou bylo kliknuto. Flexibilita a kontrola, které tento přístup nabízí, jsou užitečné zejména při práci se složitými obrázkovými mapami. 2. Vytvoření mapy HTML: Pomocí prvků „map>“ a „area>“ v jazyce HTML je tvorba obrázkových map snadná. Začněte uzavřením značky „img“ do značky „map“, která slouží k definování klikatelných částí. Uvnitř značky „map“ definujte značky „area“ pro každou oblast, která má být klikací. Každá značka „area>“ potřebuje atributy jako „shape“, „coords“ a „href“. Tvar klikací oblasti, který může být obdélníkový, kruhový nebo polygonální, je určen atributem „shape“. Souřadnice hranic oblasti jsou určeny prostřednictvím prvku „coords“. Po kliknutí na oblast se pomocí atributu ‚href‘ vybere adresa URL, na kterou má být uživatel přesměrován. Tento přístup je přehledný a ideální pro použití s jednoduchými obrázkovými mapami.
3. Použití aplikace Adobe k vytvoření obrázkové mapy: Funkce tvorby obrazových map jsou v programech Adobe, jako je Photoshop a Illustrator, velmi výkonné. Pomocí nástroje Slice Tool v programu Photoshop můžete obrázek rozřezat na části, na které lze kliknout. Stačí zvolit nástroj Slice Tool, vytvořit řezy kolem požadovaných oblastí a každému řezu přiřadit adresu URL. Až bude vaše obrázková mapa připravena, vyberte z nabídky „Soubor“ možnost „Uložit pro web“. V dialogovém okně vyberte jako formát exportu „HTML a obrázky“ a poté klepněte na tlačítko „Uložit“. Tím se vytvoří soubory HTML a obrázky potřebné pro vaši obrázkovou mapu. Pro tvorbu obrázkových map je v Illustratoru k dispozici také nástroj Slice Tool a několik možností exportu. Pro profesionální designéry jsou produkty Adobe skvělé, protože poskytují špičkové funkce pro přesnou kontrolu nad obrazovými mapami.
4. Současný význam obrazových map: Obrázkové mapy jsou méně časté, než tomu bylo dříve, a to díky nástupu responzivního webdesignu a dostupnosti modernějších technologií. Za určitých okolností jsou však stále užitečné. Obrázkové mapy lze například použít k vytváření složitých diagramů, interaktivních infografik a navigačních nabídek. Lze je také použít k zachování zpětné kompatibility se zastaralými systémy nebo k vytvoření webových stránek s retro designem. Celkově vzato, i když se možná nevyužívají tak často jako kdysi, jsou obrázkové mapy stále důležitým nástrojem pro tvorbu webových stránek.
Závěrem lze říci, že existuje mnoho způsobů, jak vytvářet obrázkové mapy, včetně použití nástrojů Adobe, jazyka HTML a jazyka JavaScript. Zatímco HTML poskytuje přímočařejší metodu vhodnou pro základní mapy, JavaScript poskytuje dynamické a přizpůsobitelné možnosti pro vytváření interaktivních obrázkových map. Na druhou stranu program Adobe nabízí silnou funkčnost pro kvalifikované návrháře. I když jsou obrázkové mapy méně časté než dříve, jsou přesto v některých situacích užitečné. Stejně jako u každé strategie vývoje webu je pro výběr nejlepší metody tvorby obrázkových map zásadní vyhodnotit požadavky projektu.
Zařízení nebo software nazývaný generátor obrázkových map umožňuje uživatelům vytvářet interaktivní obrázkové mapy. Obrázková mapa je obrázek s klikacími oblastmi neboli hotspoty, které lze propojit s různými webovými stránkami nebo akcemi. Tím, že generátor nabízí uživatelsky přívětivé rozhraní, ve kterém mohou uživatelé zadat hotspoty a připojit k nim odkazy nebo akce, aniž by museli ručně kódovat HTML, zjednodušuje tento proces. Aby byla obrázková mapa interaktivní, často generuje potřebný kód HTML nebo skript, který lze zahrnout do webové stránky.
Mapu můžete vytvořit pomocí JavaScriptu podle následujících kroků: Začněte souborem HTML a přidejte knihovnu JavaScriptu potřebnou pro tvorbu interaktivních map, například Leaflet.js nebo Google Maps API. Máte dvě možnosti, jak knihovnu začlenit: buď ji stáhnout a začlenit lokálně, nebo použít CDN (Content Delivery Network).
2. V souboru HTML vytvořte prvek div, ve kterém se má mapa zobrazit. Abyste na ni mohli odkazovat v kódu JavaScriptu, přiřaďte jí jedinečné ID. 3. Vytvořte novou instanci objektu mapy poskytovaného vybranou knihovnou ve svém programu JavaScript přístupem k prvku div pomocí jeho ID. Některé proměnné, jako je počáteční poloha, úroveň přiblížení a další parametry nastavení, mohou vyžadovat vaše zadání. 4. Upravte mapu pomocí značek, vrstev a dalších interaktivních prvků. K tomu lze použít dostupné metody a funkce vybrané knihovny. Například zadáním souřadnic zeměpisné šířky a délky můžete přidat značky na konkrétní místa. 5. Správa uživatelských akcí a událostí na mapě, jako je přibližování a oddalování nebo klikání na značky. Většina knihoven poskytuje metody zpětného volání a posluchače událostí, které umožňují na tyto události reagovat. Nakonec otevřete soubor HTML ve webovém prohlížeči a otestujte svou mapu. Ověřte, zda se mapa správně zobrazuje a zda všechny interaktivní funkce fungují tak, jak mají.
Mějte na paměti, že podrobnější pokyny a propracovanější možnosti naleznete v dokumentaci a příkladech nabízených konkrétní knihovnou JavaScriptu, kterou používáte.