Obszar w kształcie wielokąta

Gdy do interesującego nas elementu area dodamy atrybut shape wraz z wartością poly, przeglądarka internetowa będzie wiedziała o tym, że chcemy, aby klikalny obszar reprezentowany przez dany element area posiadał kształt wielokąta.

Przykład:

<map name="mapa-1">
  <area shape="poly" href="./tagi/sekcje/element-article" alt="opis elementu - article">
</map>

<img src="./files/html/obrazek-01.png" usemap="#mapa-1" alt="mapa klikalnych obszarów">

Aby określić, gdzie na mapie klikalnych obszarów powiązanej z elementem img ma pojawić się wspomniany klikalny obszar w kształcie wielokąta, należy skorzystać z atrybutu coords elementu area.

W tym wypadku jako wartość atrybutu coords elementu area należy podać współrzędne kolejnych punktów kontrolnych (przynajmniej trzech punktów kontrolnych).

Przykład:

<map name="mapa-1">
  <area shape="poly" coords="19,26,19,130,129,130" href="./tagi/sekcje/element-article" alt="opis elementu - article">
</map>

<img src="./files/html/obrazek-01.png" usemap="#mapa-1" alt="mapa klikalnych obszarów">

Rezultat:

Od tej pory, gdy klikniemy w okolice napisu "ARTICLE" (znajdującego się na naszym przykładowym obrazku powiązanym z naszą przykładową mapą klikalnych obszarów) zostaniemy przeniesieni do zasobu internetowego znajdującego się pod adresem ./tagi/sekcje/element-article.

Ponadto warto wiedzieć, iż podając współrzędne większej liczby punktów kontrolnych możemy tworzyć bardziej skomplikowane wielokąty (nie tylko trójkąty).