Mapy obrazu w języku HTML

Dowiedz czym są mapy obrazu w HTML, jak je mozna wykorzystać i jak je zrobić.

Mapy obrazu w języku HTML tworzymy „od wieków” w niemal identyczny sposób.  Służą one między innymi do tego by obrazek statyczny wykorzystać jako taki, którego pewne – oznaczone – obszary będą klikalnymi linkami (hiperłączami / odnośnikami) do zakotwiczonych w nich podstron czy innych materiałów.

Definiowanie map obrazu

Znacznik HTML <map>definiuje mapę obrazu. Mapa obrazu to obraz z klikalnymi obszarami. Obszary są definiowane za pomocą co najmniej jednego znacznika <area>.

Posłużymy się niżej przykładem z https://www.w3schools.com/

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

W kodzie mamy znacznik img, w którym znajduje się usemap="#workmap" gdzie #workmap to odniesienie się do przetrzeni naszej mapy, jej obszaru

Kolejno mamy znacznik map z atrybutem name a w nim właśnie nasz  workmap czyli <map name="workmap">. To właśnie tutaj odnosi się nasz <img src="workplace.jpg" alt="Workplace" usemap="#workmap">

Ważnym więc jest aby atrybut name miał taką samą wartość jak atrybut usemap!

Obszary w naszej mapie HTML

Obszary czyli elementy, które będą wyznaczały klikalny fragment naszej mapy. Definiujemy na 4 sposoby;

  • rect – definiuje prostokątny region
  • circle – definiuje obszar kołowy
  • poly – definiuje region wielokątny
  • default – określa cały region

Prostokątny obszaru czyli shape=”rect”

Współrzędne prostokąta definiuje się za pomocą osi X i Y. Z dwóch współrzędnych powstaje więc punkt pierwszy na naszej mapie, czyli:

Tak jak rozpisuje to przykład z w3school.com współrzędne oznaczonego w czerwonym kółku punktu to 34 i 44. Pierwsza współrzędna liczona jest „od lewego roku”, czyli 34 piksele od lewej. Współrzędna 2, czyli 44px liczona jest od góry.

Analogicznie więc musi nam powstać 2 tak oznaczony punkt na naszej mapie, by obszar zaznaczył prostokąt. Czyli podając 270 i 350px (od lewej, od góry) mamy kolejy punkt.

 

Efektem będzie klikalna przestrzeń, prowadząca do jakiegoś adresu, np.

<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">

Obszar koła czyli shape=”circle”

Analogicznie jak w przypadku prostokąta, z tym że teraz mamy do czynienia z 3 współrzędnymi.

Pierwsze dwie definiują środek naszego koła, idąc od lewej i od góry. Trzecia współrzędna definiuje promień naszego okręgu wyrażony w pixelach.

na przykład <area shape="circle" coords="337, 300, 44" href="coffee.htm">

Obszar wielopunktowy, poli czyli shape=”poli”

Analogicznie jak w przypadku circle i rect każdy z naszych punktów musi być zdefiniowany dwiema współrzędnymi:

  1. pierwsza od lewej (w pixelach);
  2. druga współrzędna od góry (w pixelach);

przykad bazujący na poniższym obrazku może więc przybrać taką postać:

<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">

Dzięki temu możemy bardzo precyzyjnie oznaczyć / zarysować obszar klikalny naszej mapy.

Mapa obrazu i JavaScript

Klikalny obszar naszej mapy może też wywoływać akcje, na przykład taką akcją może być edukacyjna mapa Polski, gdzie dziecko klikając na jakiś powiat, otrzyma informację z ciekawostkami turystycznymi danego powiatu. Wystarczy dodać element JavaScriptowy „onclick” i napisać odpowiednią akcję jako funkcję w języku JavaScript.

Przykład

<map name="workmap">
  <area shape="circle" coords="337,300,44" onclick="myFunction()">
</map>

<script>
function myFunction() {
alert("You clicked the coffee cup!");
}
</script>

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *