Treść w postaci mapy klikalnych obszarów

Spójrzmy na następujący obrazek:

Jeżeli chcemy, aby na naszym przykładowym obrazku powstały obszary, na które możemy kliknąć w celu przeniesienia się do zasobu internetowego znajdującego się pod wskazanym przez nas adresem, nasz przykładowy obrazek musimy powiązać z mapą klikalnych obszarów, którą to mapę klikalnych obszarów musimy sami utworzyć, dzięki czemu będziemy mogli uzyskać między innymi następujący rezultat:

Za utworzenie mapy klikalnych obszarów odpowiada element map, dla którego za pomocą wartości atrybutu name należy ustalić nazwę.

Przykład:

<map name="mapa-1"></map>

Aby element map mógł zostać powiązany z interesującym nas elementem img, do interesującego nas elementu img należy dodać atrybut usemap wraz z wartością atrybutu name interesującego nas elementu map. Dodatkowo wspomniana wartość atrybutu usemap elementu img musi rozpoczynać się od znaku #.

Przykład:

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

W następnym kroku dowiemy się, jak sprawić, aby mapa klikalnych obszarów posiadała klikalny obszar.