# Obszar martwy

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:

```html
<map name="mapa-1">
  <area shape="poly" coords="19,26,19,130,129,130" href="./tagi/sekcje/element-article" alt="opis elementu - article">
  <area shape="rect" coords="172,23,279,130" href="./tagi/sekcje/element-section" alt="opis elementu - section">
  <area shape="circle" coords="74,227,56" href="./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="./tagi/sekcje/element-aside" alt="opis elementu - aside">
</map>

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

Rezultat:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FAOkrCoI0dJGAx2WTbl88%2Fimage.png?alt=media&#x26;token=b6760be4-3c98-4462-bb44-9a308a117081" alt=""><figcaption></figcaption></figure>

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:

```html
<map name="mapa-2">
  <!-- ten element "area" występuje wcześniej (1) -->
  <area href="./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="./tagi/sekcje/element-section" shape="rect" coords="39,69,261,148" alt="opis elementu - section">
</map>

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

Rezultat:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FJshJntv81R3Cp1JsUxMz%2Fimage.png?alt=media&#x26;token=7580b0f7-113c-439f-8b6c-df056feea9c4" alt=""><figcaption></figcaption></figure>

Na naszej przykładowej mapie klikalnych obszarów, klikalny obszar prowadzący do zasobu internetowego znajdującego się pod adresem `https://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 `https://webkod.pl/kurs-html/tagi/sekcje/element-section`.

Kolejny przykład:

```html
<map name="mapa-3">
  <!-- ten element "area" występuje wcześniej (1) -->
  <area href="./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="./tagi/sekcje/element-article" shape="rect" coords="95,44,204,229" alt="opis elementu - article">
</map>

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

Rezultat:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FIjpBXX47jK2mnuQrPhng%2Fimage.png?alt=media&#x26;token=9793bb62-b8d8-403c-ab3d-2eb8f1bc9f6b" alt=""><figcaption></figcaption></figure>

Tym razem na naszej przykładowej mapie klikalnych obszarów, klikalny obszar prowadzący do zasobu internetowego znajdującego się pod adresem `./tagi/sekcje/element-section` jest bardziej na wierzchu, niż klikalny obszar prowadzący do zasobu internetowego znajdującego się pod adresem `./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:

```html
<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="./tagi/sekcje/element-article" alt="opis elementu - article">
</map>

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

Rezultat:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FbhHURh0AGAigIaxltZ8y%2Fimage.png?alt=media&#x26;token=6532fc97-7317-4698-8fd7-39c189a1ac6e" alt=""><figcaption></figcaption></figure>
