Obszar w kształcie prostokąta

Aby określić, jaki kształt ma posiadać interesujący nas klikalny obszar na mapie klikalnych obszarów, należy skorzystać z atrybutu shape elementu area.

Przykład:

<map name="mapa-1">
  <area shape="rect" href="https://webkod.pl/kurs-html/tagi/sekcje/element-section" alt="opis elementu - section">
</map>

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

Wartość rect atrybutu shape elementu area mówi przeglądarce internetowej o tym, że chcemy, aby klikalny obszar reprezentowany przez dany element area posiadał kształt prostokąta.

Aby określić, gdzie na mapie klikalnych obszarów powiązanej z elementem img ma pojawić się wspomniany klikalny obszar w kształcie prostokąta, należy skorzystać z atrybutu coords elementu area, lecz zanim to zrobimy, musimy uświadomić sobie kilka ważnych rzeczy.

Po pierwsze. Każdy obrazek posiada swój rozmiar szerokości oraz swój rozmiar wysokości (w tym wypadku wartości wspomnianych rozmiarów liczone są przez przeglądarkę internetową w pikselach).

Po drugie. Lewy górny róg każdego obrazka jest punktem o współrzędnych 0,0.

Po trzecie. Za pomocą współrzędnych (w tym wypadku dwóch wartości) możemy określić miejsce interesującego nas punktu kontrolnego (podając jego odsunięcie w poziomie oraz w pionie od punktu 0,0 (wspomniane odsunięcie liczone jest przez przeglądarkę internetową w pikselach)).

Po czwarte. Wspomniany punkt kontrolny może znaleźć się również poza granicami obrazka.

Po piąte. Podając przeglądarce internetowej współrzędne dwóch punktów kontrolnych, przeglądarka internetowa będzie mogła utworzyć prostokąt.

Na podstawie przedstawionych informacji oraz wartości atrybutu coords elementu area posiadającego atrybut shape o wartości rect możemy określić miejsce występowania oraz wielkość klikalnego obszaru w kształcie prostokąta.

Przykład:

<map name="mapa-1">
  <area shape="rect" coords="172,23,279,130" href="https://webkod.pl/kurs-html/tagi/sekcje/element-section" alt="opis elementu - section">
</map>

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

Rezultat:

Od tej pory, gdy klikniemy w okolice napisu "SECTION" (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 https://webkod.pl/kurs-html/tagi/sekcje/element-section.