Obszar w kształcie koła

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

Przykład:

<map name="mapa-1">
  <area shape="circle" href="./tagi/sekcje/element-nav" alt="opis elementu - nav">
</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 koła, należy skorzystać z atrybutu coords elementu area.

W tym wypadku jako wartość atrybutu coords elementu area należy podać współrzędne jednego punktu kontrolnego (który chcemy, aby był punktem środka koła) oraz długość promienia koła (która liczona jest przez przeglądarkę internetową w pikselach). Wszystkie wspomniane składniki wartości atrybutu coords elementu area muszą być liczbami całkowitymi oraz muszą być oddzielone od siebie dokładnie jednym znakiem przecinka (oraz żadnym białym znakiem).

Przykład:

<map name="mapa-1">
  <area shape="circle" coords="74,227,56" href="./tagi/sekcje/element-nav" alt="opis elementu - nav">
</map>

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

Rezultat:

Od tej pory, gdy klikniemy w okolice napisu "NAV" (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-nav.