Co je dobré vědět
• Použijte obrázek normální velikosti, který prohlížeč nezmění. Budete také potřebovat editor obrázků a HTML nebo textový editor.
• Při vkládání obrázku přidejte další atribut k identifikaci souřadnic mapy.
• Například:
Tento článek vysvětluje, jak vytvořit obrázkové mapy pomocí značek HTML namísto editoru obrázkových map. Většina editorů obrázků vám ukáže souřadnice myši, když ukážete na obrázek, což jsou všechna data, která potřebujete, abyste mohli začít s obrázkovými mapami.
Vytvoření obrázkové mapy
Chcete-li vytvořit obrázkovou mapu, nejprve vyberte obrázek, který bude sloužit jako základ mapy. Obrázek by měl mít „normální velikost“– to znamená, že byste neměli používat obrázek tak velký, aby jej prohlížeč změnil.
Když vložíte obrázek, přidáte další atribut, který identifikuje souřadnice mapy:
Při vytváření obrázkové mapy vytváříte oblast, na kterou lze kliknout na obrázku, takže souřadnice mapy musí být v souladu s výškou a šířkou vybraného obrázku. Mapy podporují tři různé typy tvarů:
- obdélník-obdélník nebo čtyřstranný obrázek
- poly-a mnohoúhelník nebo vícestranný obrázek
- circle-a circle
Chcete-li vytvořit oblasti, musíte izolovat konkrétní souřadnice, které chcete mapovat. Mapa se může skládat z jedné nebo více definovaných oblastí na obrázku, na které se po kliknutí otevře nový hypertextový odkaz.
U obdélníku mapujete pouze levý horní a pravý dolní roh. Všechny souřadnice jsou uvedeny jako x, y (přes, nahoru). Takže pro levý horní roh 0, 0 a pravý dolní roh 10, 15 byste napsali 0, 0, 10, 15. Poté jej zahrnete do mapy:
U polygonu mapujete každou souřadnici x, y samostatně. Webový prohlížeč automaticky spojí poslední sadu souřadnic s první; cokoliv uvnitř těchto souřadnic je součástí mapy.
Kruhové tvary vyžadují pouze dvě souřadnice, jako je obdélník, ale pro druhou souřadnici určíte poloměr nebo vzdálenost od středu kruhu. Takže pro kružnici se středem 122, 122 a poloměrem 5 byste napsali 122, 122, 5:
Všechny oblasti a tvary mohou být zahrnuty do stejné značky mapy:
Úvahy
Obrázkové mapy byly mnohem běžnější v éře Web 1.0 v 90. letech 20. století až do počátku 21. století – obrazové mapy často tvořily základ navigace na webových stránkách. Návrhář by vytvořil nějaký druh obrázku, který by označil položky nabídky, a pak nastavil mapu.
Moderní přístupy podporují responzivní design a používají kaskádové styly k ovládání umístění obrázků a hypertextových odkazů na stránce.
Ačkoli je značka map stále podporována ve standardu HTML, použití mobilních zařízení s malými rozměry může vést k neočekávaným problémům s výkonem obrazových map. Kromě toho problémy s šířkou pásma nebo nefunkční obrázky diskutují o hodnotě obrázkové mapy.
Neváhejte tedy pokračovat v používání této stabilní, dobře srozumitelné technologie – s vědomím, že mezi webovými designéry jsou v současné době v módě efektivnější alternativy.
