Co je třeba vědět
• Použijte obrázek normální velikosti, který prohlížeč nezmění měřítko. 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 obrazové mapy pomocí značek HTML namísto editoru obrazových map. Většina editorů obrázků vám ukáže souřadnice myši, když na obrázek ukážete, což jsou všechna data, která potřebujete, abyste mohli začít s obrazovými mapami.
Vytvoření obrazové mapy
Chcete-li vytvořit obrazovou 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č zmenšil. Když vložíte obrázek, přidáte další atribut, který identifikuje souřadnice mapy:
class = „ql-syntax“> Když vytváříte obrazovou mapu, vytváříte oblast, na kterou lze kliknout, takže souřadnice mapy se musí shodovat s výškou a šířkou vybraného obrázku. Mapy podporují tři různé typy tvarů:
- přímý – obdélník nebo čtyřstranný obrazec
- poly – polygon nebo mnohostranný obrázek
- kruh – kruh
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, které po kliknutí otevřou nový hypertextový odkaz. Pro obdélník, 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 zadali 0,0,10,15. Poté jej zahrnete do mapy:
class = „ql-syntax“>
Pro polygon, mapujete každý x, y koordinovat samostatně. Webový prohlížeč automaticky spojuje poslední sadu souřadnic s první; cokoli uvnitř těchto souřadnic je součástí mapy.
class = „ql-syntax“>
Kruh 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 kruh se středem na 122,122 a poloměrem 5 byste napsali 122,122,5:
class = „ql-syntax“>
Do stejné značky mapy mohou být zahrnuty všechny oblasti a tvary:
class = „ql-syntax“>
Úvahy
Obrazové mapy byly mnohem častější v éře Web 1.0 90. let do velmi časných 2000ů – obrazové mapy často tvořily základ pro navigaci na webu. Návrhář by vytvořil nějaký obrázek, který by označil položky nabídky, a pak by nastavil mapu. Moderní přístupy podporují responzivní design a používají kaskádové šablony stylů k ovládání umístění obrázků a hypertextových odkazů na stránku. Ačkoli je značka mapy ve standardu HTML stále podporována, může použití mobilních zařízení s malými tvarovými faktory vést k neočekávaným problémům s výkonem u obrazových map. Kromě toho problémy se šířkou pásma nebo nefunkční obrázky snižují hodnotu obrazové mapy. Nebojte se tedy i nadále používat tuto stabilní a dobře pochopenou technologii – s vědomím, že v současné době existují účinnější alternativy en v módě s webovými designéry.