Ostatnio edytowany:

Obszar w kształcie prostokąta

Autor: Virtual Patriot

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="http://webkod.pl/kurs-html/tagi/sekcje/element-section" alt="opis elementu - section">
</map>

<img src="http://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).

rozmiar szerokości oraz rozmiar wysokości obrazka

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

punkt zero obrazka

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)).

punkt kontrolny na obrazku

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

punkt kontrolny poza obrazkiem

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.

obszar w kształcie prostokąta

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="http://webkod.pl/kurs-html/tagi/sekcje/element-section" alt="opis elementu - section">
</map>

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

Rezultat:

opis elementu - section mapa klikalnych obszarów

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 http://webkod.pl/kurs-html/tagi/sekcje/element-section.