Jak vytvářet obrázkové mapy bez editoru obrázkových map

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 obrazovou mapu, vyberte nejprve 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:

Když vytváříte obrázkovou mapu, 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 obrázku, který jste vybrali. Mapy podporují tři různé typy tvarů:

• rect — obdélník nebo čtyřhranná postava
• poly — mnohoúhelník nebo vícestranný obrazec
• 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, na které se po kliknutí otevře 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 byste zadali 0,0 a pravý dolní roh 10,15 0,0,10,15. Poté jej zahrnete do mapy:

Pro polygon, zmapujete každý x, y koordinovat samostatně. Webový prohlížeč automaticky spojí poslední sadu souřadnic s první; cokoliv uvnitř těchto souřadnic je součástí mapy.

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 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

Obrazové mapy byly mnohem běžnější v éře Webu 1.0 od 90. let do velmi raného 21. století – obrazové mapy často tvořily základ navigace webových stránek. Návrhář by vytvořil nějaký druh obrázku, který by označoval položky nabídky, a pak nastavil mapu.

Moderní přístupy podporují responzivní design a používají kaskádové styly k řízení umístění obrázků a hypertextových odkazů na stránku.

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 u obrazových map. Kromě toho problémy s šířkou pásma nebo nefunkční obrazy diskutují o hodnotě obrazové mapy.

Neváhejte tedy nadále používat tuto stabilní, dobře srozumitelnou technologii – s vědomím, že v současnosti existují efektivnější alternativy v módě s webovými designéry.