Ostatnio edytowany:

Obszar martwy

Autor: Virtual Patriot

Aby zrozumieć czym jest obszar martwy oraz dowiedzieć się, jak utworzyć obszar martwy na mapie klikalnych obszarów, musimy uświadomić sobie kilka rzeczy.

Po pierwsze. Każda mapa klikalnych obszarów może posiadać kilka klikalnych obszarów jednocześnie.

Przykład:

<map name="mapa-1">
  <area shape="poly" coords="19,26,19,130,129,130" href="http://webkod.pl/kurs-html/tagi/sekcje/element-article" alt="opis elementu - article">
  <area shape="rect" coords="172,23,279,130" href="http://webkod.pl/kurs-html/tagi/sekcje/element-section" alt="opis elementu - section">
  <area shape="circle" coords="74,227,56" href="http://webkod.pl/kurs-html/tagi/sekcje/element-nav" alt="opis elementu - nav">
  <area shape="poly" coords="175,171,253,163,209,207,269,188,265,278,231,238,192,278" href="http://webkod.pl/kurs-html/tagi/sekcje/element-aside" alt="opis elementu - aside">
</map>

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

Rezultat:

opis elementu - article opis elementu - section opis elementu - nav opis elementu - aside mapa klikalnych obszarów

Po drugie. W sytuacji gdy jeden klikalny obszar nachodzi na drugi klikalny obszar, wtedy obszarem będącym najbardziej na wierzchu jest ten obszar, który reprezentowany jest przez element area, który występuje wcześniej w zawartości elementu map.

Przykład:

<map name="mapa-2">
  <!-- ten element "area" występuje wcześniej (1) -->
  <area href="http://webkod.pl/kurs-html/tagi/sekcje/element-article" shape="rect" coords="95,44,204,229" alt="opis elementu - article">
  <!-- ten element "area" występuje później (2) -->
  <area href="http://webkod.pl/kurs-html/tagi/sekcje/element-section" shape="rect" coords="39,69,261,148" alt="opis elementu - section">
</map>

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

Rezultat:

opis elementu - article opis elementu - section mapa klikalnych obszarów

Na naszej przykładowej mapie klikalnych obszarów, klikalny obszar prowadzący do zasobu internetowego znajdującego się pod adresem http://webkod.pl/kurs-html/tagi/sekcje/element-article jest bardziej na wierzchu, niż klikalny obszar prowadzący do zasobu internetowego znajdującego się pod adresem http://webkod.pl/kurs-html/tagi/sekcje/element-section.

Kolejny przykład:

<map name="mapa-3">
  <!-- ten element "area" występuje wcześniej (1) -->
  <area href="http://webkod.pl/kurs-html/tagi/sekcje/element-section" shape="rect" coords="39,69,261,148" alt="opis elementu - section">
  <!-- ten element "area" występuje później (2) -->
  <area href="http://webkod.pl/kurs-html/tagi/sekcje/element-article" shape="rect" coords="95,44,204,229" alt="opis elementu - article">
</map>

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

Rezultat:

opis elementu - section opis elementu - article mapa klikalnych obszarów

Tym razem na naszej przykładowej mapie klikalnych obszarów, klikalny obszar prowadzący do zasobu internetowego znajdującego się pod adresem http://webkod.pl/kurs-html/tagi/sekcje/element-section jest bardziej na wierzchu, niż klikalny obszar prowadzący do zasobu internetowego znajdującego się pod adresem http://webkod.pl/kurs-html/tagi/sekcje/element-article.

Po trzecie. Gdy element area nie posiada atrybutu href, wtedy element area nie prowadzi do żadnego zasobu internetowego, lecz wspomniany element area nadal tworzy obszar na mapie klikalnych obszarów (tzw. obszar martwy), który to obszar martwy może przykryć inne klikalne obszary występujące na tej samej mapie klikalnych obszarów.

Przykład:

<map name="mapa-4">
  <!-- obszar martwy (1) -->
  <area shape="rect" coords="97,94,242,234">
  <!-- inny klikalny obszar (2) -->
  <area shape="rect" coords="51,60,262,272" href="http://webkod.pl/kurs-html/tagi/sekcje/element-article" alt="opis elementu - article">
</map>

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

Rezultat:

opis elementu - article mapa klikalnych obszarów