Ostatnio edytowany:

area

Autor: Virtual Patriot

Przeznaczenie elementu area

Element area reprezentuje jeden obszar na mapie klikalnych obszarów reprezentowanej przez element map.

Dodatkowe techniczne informacje o elemencie area

kategoria ogólna
kontekst zewnętrzny
element HTML, który tworzy wewnętrzny kontekst frazowany, lecz tylko wtedy gdy jednym z elementów przodków danego elementu area jest element map lub element template

Przykładowy Kod HTML

<figure>
  <map name="mapa-1">
    <area href="figura-1.html" shape="rect" coords="0,0,100,50" alt="prostokąt">
    <a href="figura-1.html">zobacz więcej informacji o prostokącie</a>
  </map>

  <img src="figury-geometryczne.png" usemap="#mapa-1" alt="mapa klikalnych obszarów - figury geometryczne">
  <figcaption>Figury geometryczne</figcaption>
</figure>

Kontekstem zewnętrznym przykładowego elementu "area" jest element "map". Wspomniany element "map" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst frazowany, jak również wspomniany element "map" jest jednym z elementów przodków wspomnianego elementu "area", dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "map", jest prawidłowym kontekstem zewnętrznym dla elementu "area".

Przykładowy Kod HTML

<figure>
  <map name="mapa-1">
    <div lang="en">
      <area href="figure-1.html" shape="rect" coords="0,0,100,50" alt="rectangle">
      <area href="figure-2.html" shape="rect" coords="150,150,300,300" alt="square">
      <area href="figure-3.html" shape="circle" coords="500,500,100" alt="circle">
    </div>

    <a href="figury-geometryczne-pl.html">zobacz również wersję w języku polskim</a>
  </map>

  <img src="figury-geometryczne.png" usemap="#mapa-1" alt="mapa klikalnych obszarów - figury geometryczne">
  <figcaption>Figury geometryczne</figcaption>
</figure>

Kontekstem zewnętrznym przykładowych elementów "area" jest element "div". Wspomniany element "div" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst frazowany. Ponadto jednym z elementów przodków wspomnianych elementów "area" jest element "map", dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "div", jest prawidłowym kontekstem zewnętrznym dla poszczególnych elementów "area".

Przykładowy Kod HTML

<template id="szablon-1">
  <div lang="en">
    <area href="figure-1.html" shape="rect" coords="0,0,100,50" alt="rectangle">
    <area href="figure-2.html" shape="rect" coords="150,150,300,300" alt="square">
    <area href="figure-3.html" shape="circle" coords="500,500,100" alt="circle">
  </div>
</template>

Kontekstem zewnętrznym przykładowych elementów "area" jest element "div". Wspomniany element "div" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst frazowany. Ponadto jednym z elementów przodków wspomnianych elementów "area" jest element "template", dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "div", jest prawidłowym kontekstem zewnętrznym dla poszczególnych elementów "area".

kontekst wewnętrzny

brak

wymagane elementy dzieci

brak

wymagane atrybuty

atrybut alt w przypadku gdy dany element area posiada atrybut href

składnia HTML

<area>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

zawsze

CSS display

none

Dodatkowe domyślne reguły CSS elementu area

area {
  display:none;
}

Interpretacja elementu area

Firefox

tak

Google Chrome

tak

Safari

tak

Nie interpretuje atrybutu download.

Opera

tak

Internet Explorer

tak

Nie interpretuje atrybutu download.

Edge

tak

Opis atrybutów elementu area

alt

Przeznaczenie atrybutu alt

Atrybut alt wykorzystany wraz z elementem area określa treść alternatywną (zamienną) w postaci tekstu, który ma pełnić rolę opisu zasobu internetowego reprezentowanego przez dany element area.

Atrybut "alt" ma sens tylko wtedy gdy dany element "area" posiada atrybut href.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu alt

tekst alternatywny

Należy podać ciąg znaków, który chcemy aby został wykorzystany przez przeglądarkę internetową do określenia interesującego nas opisu.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-1">
      <area href="http://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-object" shape="poly" coords="16,69,200,28,180,214" alt="opis elementu - object">
    </map>

    <img src="http://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-1" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

Rezultat

opis elementu - object mapa z jednym klikalnym obszarem

Treścią alternatywną zasobu internetowego reprezentowanego przez przykładowy element "area" jest treść w postaci ciągu znaków "opis elementu - object", ponieważ do wspomnianego elementu "area" został dodany atrybut "alt" wraz z wartością "opis elementu - object".

coords

Przeznaczenie atrybutu coords

Atrybut coords wykorzystany wraz z elementem area określa kolejne wartości składników tworzących kształt klikalnego obszaru reprezentowanego przez dany element area.

Atrybut "coords" ma sens tylko wtedy gdy dany element "area" posiada atrybut shape o wartości innej niż wartość default.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu coords

wzór: x1,y1,x2,y2

Według zdefiniowanego wzorca wartości możemy określić prostokątny kształt klikalnego obszaru reprezentowanego przez dany element area.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-2">
      <area href="http://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-video" shape="rect" coords="172,23,279,130" alt="opis elementu - video">
    </map>

    <img src="http://webkod.pl/files/html/klikalna-mapa-02.png" usemap="#mapa-2" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

Rezultat

opis elementu - video mapa z jednym klikalnym obszarem

Klikalny obszar reprezentowany przez przykładowy element "area" na mapie klikalnych obszarów reprezentowanej przez element "map" został utworzony na podstawie wartości "172,23,279,130", ponieważ do wspomnianego elementu "area" został dodany atrybut "coords" wraz z wartością "172,23,279,130".

Wspomniany wzorzec wartości ma sens tylko wtedy gdy dany element "area" posiada atrybut shape o wartości rect.

Wyjaśnienie wzorca wartości

Przykładowe zapisy

20,40,120,140

0,0,150,150

150,200,500,400

x1

Wymagany składnik x1 danego wzorca wartości określa względem poziomu oraz względem lewej krawędzi obrazka wartość pierwszej współrzędnej pierwszego punktu kontrolnego, na podstawie którego ma powstać prostokątny kształt klikalnego obszaru.

Dostępne wartości

dowolna liczba całkowita

y1

Wymagany składnik y1 danego wzorca wartości określa względem pionu oraz względem górnej krawędzi obrazka wartość drugiej współrzędnej pierwszego punktu kontrolnego, na podstawie którego ma powstać prostokątny kształt klikalnego obszaru.

Dostępne wartości

dowolna liczba całkowita

x2

Wymagany składnik x2 danego wzorca wartości określa względem poziomu oraz względem lewej krawędzi obrazka wartość pierwszej współrzędnej drugiego punktu kontrolnego, na podstawie którego ma powstać prostokątny kształt klikalnego obszaru.

Dostępne wartości

dowolna liczba całkowita

y2

Wymagany składnik y2 danego wzorca wartości określa względem pionu oraz względem górnej krawędzi obrazka wartość drugiej współrzędnej drugiego punktu kontrolnego, na podstawie którego ma powstać prostokątny kształt klikalnego obszaru.

Dostępne wartości

dowolna liczba całkowita

wzorzec graficzny - kształt prostokąta

Na grafice - prostokątny kształt klikalnego obszaru w praktyce.
wzór: x,y,r

Według zdefiniowanego wzorca wartości możemy określić okrągły kształt klikalnego obszaru reprezentowanego przez dany element area.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-3">
      <area href="http://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-object" shape="circle" coords="74,227,56" alt="opis elementu - object">
    </map>

    <img src="http://webkod.pl/files/html/klikalna-mapa-02.png" usemap="#mapa-3" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

Rezultat

opis elementu - object mapa z jednym klikalnym obszarem

Klikalny obszar reprezentowany przez przykładowy element "area" na mapie klikalnych obszarów reprezentowanej przez element "map" został utworzony na podstawie wartości "74,227,56", ponieważ do wspomnianego elementu "area" został dodany atrybut "coords" wraz z wartością "74,227,56".

Wspomniany wzorzec wartości ma sens tylko wtedy gdy dany element "area" posiada atrybut shape o wartości circle.

Wyjaśnienie wzorca wartości

Przykładowe zapisy

50,100,75

0,0,100

-25,-25,150

x

Wymagany składnik x danego wzorca wartości określa względem poziomu oraz względem lewej krawędzi obrazka wartość pierwszej współrzędnej punktu środka koła, na podstawie którego ma powstać okrągły kształt klikalnego obszaru.

Dostępne wartości

dowolna liczba całkowita

y

Wymagany składnik y danego wzorca wartości określa względem pionu oraz względem górnej krawędzi obrazka wartość drugiej współrzędnej punktu środka koła, na podstawie którego ma powstać okrągły kształt klikalnego obszaru.

Dostępne wartości

dowolna liczba całkowita

r

Wymagany składnik r danego wzorca wartości określa długość promienia koła, na podstawie którego ma powstać okrągły kształt klikalnego obszaru.

Dostępne wartości

dowolna nieujemna liczba całkowita

wzorzec graficzny - kształt koła

Na grafice - okrągły kształt klikalnego obszaru w praktyce.
wzór: x1,y1,x2,y2,x3,y3

Według zdefiniowanego wzorca wartości możemy określić wielokątny kształt klikalnego obszaru reprezentowanego przez dany element area.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-4">
      <area href="http://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-audio" shape="poly" coords="19,26,19,130,129,130" alt="opis elementu - audio">
    </map>

    <img src="http://webkod.pl/files/html/klikalna-mapa-02.png" usemap="#mapa-4" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

Rezultat

opis elementu - audio mapa z jednym klikalnym obszarem

Klikalny obszar reprezentowany przez przykładowy element "area" na mapie klikalnych obszarów reprezentowanej przez element "map" został utworzony na podstawie wartości "19,26,19,130,129,130", ponieważ do wspomnianego elementu "area" został dodany atrybut "coords" wraz z wartością "19,26,19,130,129,130".

Wspomniany wzorzec wartości ma sens tylko wtedy gdy dany element "area" posiada atrybut shape o wartości poly.

Wyjaśnienie wzorca wartości

Ważne

możemy podać więcej niż trzy pary współrzędnych, dzięki czemu możemy definiować bardziej skomplikowane wielokąty

Przykładowe zapisy

10,20,20,120,140,130

-30,30,120,-50,50,150

10,20,20,120,140,130,150,200

10,20,20,120,140,130,150,200,100,220

x1

Wymagany składnik x1 danego wzorca wartości określa względem poziomu oraz względem lewej krawędzi obrazka wartość pierwszej współrzędnej pierwszego punktu kontrolnego, na podstawie którego ma powstać wielokątny kształt klikalnego obszaru.

Dostępne wartości

dowolna liczba całkowita

y1

Wymagany składnik y1 danego wzorca wartości określa względem pionu oraz względem górnej krawędzi obrazka wartość drugiej współrzędnej pierwszego punktu kontrolnego, na podstawie którego ma powstać wielokątny kształt klikalnego obszaru.

Dostępne wartości

dowolna liczba całkowita

x2

Wymagany składnik x2 danego wzorca wartości określa względem poziomu oraz względem lewej krawędzi obrazka wartość pierwszej współrzędnej drugiego punktu kontrolnego, na podstawie którego ma powstać wielokątny kształt klikalnego obszaru.

Dostępne wartości

dowolna liczba całkowita

y2

Wymagany składnik y2 danego wzorca wartości określa względem pionu oraz względem górnej krawędzi obrazka wartość drugiej współrzędnej drugiego punktu kontrolnego, na podstawie którego ma powstać wielokątny kształt klikalnego obszaru.

Dostępne wartości

dowolna liczba całkowita

x3

Wymagany składnik x3 danego wzorca wartości określa względem poziomu oraz względem lewej krawędzi obrazka wartość pierwszej współrzędnej trzeciego punktu kontrolnego, na podstawie którego ma powstać wielokątny kształt klikalnego obszaru.

Dostępne wartości

dowolna liczba całkowita

y3

Wymagany składnik y3 danego wzorca wartości określa względem pionu oraz względem górnej krawędzi obrazka wartość drugiej współrzędnej trzeciego punktu kontrolnego, na podstawie którego ma powstać wielokątny kształt klikalnego obszaru.

Dostępne wartości

dowolna liczba całkowita

wzorzec graficzny - kształt wielokąta w postaci trójkąta

Na grafice - wielokątny kształt klikalnego obszaru (w postaci trójkąta) w praktyce.

wzorzec graficzny - kształt wielokąta

Na grafice - wielokątny kształt klikalnego obszaru (w postaci pięciokąta) w praktyce.

download

Przeznaczenie atrybutu download

Atrybut download wykorzystany wraz z elementem area określa nazwę, jaką powinien posiadać zasób internetowy, który może zostać pobrany na nasze urządzenie końcowe za pośrednictwem danego elementu area.

Atrybut "download" ma sens tylko wtedy gdy dany element "area" posiada atrybut href.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu download

nazwa

Należy podać ciąg znaków, który chcemy aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas nazwy.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-5">
      <area href="http://webkod.pl/files/html/plik-01.rar" download="plik rar - zdjęcie lwa.rar" shape="poly" coords="16,69,200,28,180,214" alt="kliknij, aby pobrać zdjęcie lwa na własne urządzenie końcowe">
    </map>

    <img src="http://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-5" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

Rezultat

kliknij, aby pobrać zdjęcie lwa na własne urządzenie końcowe mapa z jednym klikalnym obszarem

Zasób internetowy "plik-01.rar" reprezentowany przez przykładowy element "area", po pobraniu na nasze urządzenie końcowe za pośrednictwem wspomnianego elementu "area" będzie posiadał nazwę "plik rar - zdjęcie lwa.rar", ponieważ do wspomnianego elementu "area" został dodany atrybut "download" wraz z wartością "plik rar - zdjęcie lwa.rar".

We wspomnianej nazwie warto również uwzględnić rozszerzenie pliku, aby ułatwić naszemu urządzeniu końcowemu rozpoznanie typu zasobu internetowego, które zostanie pobrane.

href

Przeznaczenie atrybutu href

Atrybut href wykorzystany wraz z elementem area określa adres zasobu internetowego, który powinien być reprezentowany przez dany element area.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu href

URI

Należy podać ciąg znaków w formie adresu URI.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-6">
      <area href="http://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-object" shape="poly" coords="16,69,200,28,180,214" alt="opis elementu - object">
    </map>

    <img src="http://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-6" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

Rezultat

opis elementu - object mapa z jednym klikalnym obszarem

Zasobem internetowym, który powinien być reprezentowany przez przykładowy element "area" jest zasób internetowy znajdujący się pod adresem "http://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-object", dlatego do wspomnianego elementu "area" został dodany atrybut "href" wraz z wartością "http://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-object".

hreflang

Przeznaczenie atrybutu hreflang

Atrybut hreflang wykorzystany wraz z elementem area określa informację o bazowym języku, jaki posiada zasób internetowy reprezentowany przez dany element area.

Atrybut "hreflang" ma sens tylko wtedy gdy dany element "area" posiada atrybut href.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu hreflang

symbol języka

Należy podać ciąg znaków w formie symbolu języka (Norma ISO 639-1).

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-7">
      <area href="http://www.w3.org/TR/html5/tabular-data.html" hreflang="en" shape="poly" coords="16,69,200,28,180,214" alt="kliknij, aby zobaczyć listę elementów HTML tworzących tabelę HTML - wersja angielska">
    </map>

    <img src="http://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-7" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

Rezultat

kliknij, aby zobaczyć listę elementów HTML tworzących tabelę HTML - wersja angielska mapa z jednym klikalnym obszarem

Ponieważ do przykładowego elementu "area" został dodany atrybut "hreflang" wraz z wartością "en" wspomniany element "area" reprezentujący zasób internetowy znajdujący się pod adresem "http://www.w3.org/TR/html5/tabular-data.html" zawiera dodatkową informację dla przeglądarki internetowej o tym, że bazowym językiem, jaki posiada wspomniany zasób internetowy jest język angielski.

rel

Przeznaczenie atrybutu rel

Atrybut rel wykorzystany wraz z elementem area określa relację pomiędzy dokumentem HTML, w którego zawartości znajduje się dany element area, a zasobem internetowym reprezentowanym przez wspomniany element area.

Atrybut "rel" ma sens tylko wtedy gdy dany element "area" posiada atrybut href.

Możemy podać kilka wartości oddzielonych od siebie przynajmniej jednym znakiem spacji, jeżeli będzie miało to sens.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu rel

alternate

Wartość alternate oznacza, że dany element area reprezentuje alternatywny (zamienny) zasób internetowy danego dokumentu HTML.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <main>
      <article>
        <h2>Mój ulubiony owoc</h2>
        <p>Moim ulubionym owocem jest <b>czereśnia</b>.</p>
        <img src="http://webkod.pl/files/html/owoc-01.png" alt="zdjęcie czereśni">
        <p>Ponieważ uwielbiam ten czereśniowy smak.</p>
      </article>
    </main>

    <footer>
      <map name="mapa-15">
        <area href="owoce.xml" rel="alternate" shape="poly" coords="16,69,200,28,180,214" alt="owoce - wersja xml">
      </map>

      Zobacz również: <img src="http://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-15" alt="owoce - wersja xml">
    </footer>

  </body>
</html>

Ponieważ do przykładowego elementu "area" został dodany atrybut "rel" wraz z wartością "alternate" wspomniany element "area" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy reprezentowany przez wspomniany element "area" jest alternatywnym zasobem internetowym danego dokumentu HTML.

Jeżeli dany element "area" posiada atrybut type o wartości "application/rss+xml" lub o wartości "application/atom+xml", wtedy wspomniany element "area" reprezentuje alternatywny (zamienny) zasób internetowy danego dokumentu HTML lub jego poszczególnych części w postaci RSS.

author

Wartość author oznacza, że dany element area reprezentuje zasób internetowy zawierający informacje o autorze lub o autorach danego dokumentu HTML lub poszczególnych części wspomnianego dokumentu HTML.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <main>
      <article>
        <h2>Mój ulubiony owoc</h2>
        <p>Moim ulubionym owocem jest <b>czereśnia</b>.</p>
        <img src="http://webkod.pl/files/html/owoc-01.png" alt="zdjęcie czereśni">
        <p>Ponieważ uwielbiam ten czereśniowy smak.</p>

        <footer>
          <map name="mapa-16">
            <area href="wydawca-jan-kowalski.html" rel="author" shape="poly" coords="16,69,200,28,180,214" alt="informacje o wydawcy - Jan Kowalski">
          </map>

          Autor artykułu: <img src="http://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-16" alt="Jan Kowalski">
        </footer>
      </article>
    </main>

  </body>
</html>

Ponieważ do przykładowego elementu "area" został dodany atrybut "rel" wraz z wartością "author" wspomniany element "area" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy reprezentowany przez wspomniany element "area" zawiera informacje o autorze treści reprezentowanej przez zawartość elementu "article", który to element "article" jest pierwszym w kolejności odszukanym elementem przodkiem typu "article" wspomnianego elementu "area".

Jeżeli jednym z elementów przodków danego elementu "area" jest element article, wtedy informacje o autorze odnoszą się do treści reprezentowanej przez zawartość wspomnianego elementu article (pierwszego w kolejności).

bookmark

Wartość bookmark oznacza, że dany element area reprezentuje niezmienny, bezpośredni odnośnik (tzw. permalink), który odnosi się do treści reprezentowanej przez zawartość elementu article (lub każdego innego elementu HTML tworzącego sekcję zawartości), który jest pierwszym w kolejności odszukanym elementem przodkiem wspomnianego elementu area.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <main>
      <article id="ulubiony-owoc">
        <h2>Mój ulubiony owoc</h2>
        <p>Moim ulubionym owocem jest <b>czereśnia</b>.</p>
        <img src="http://webkod.pl/files/html/owoc-01.png" alt="zdjęcie czereśni">
        <p>Ponieważ uwielbiam ten czereśniowy smak.</p>

        <footer>
          <map name="mapa-17">
            <area href="http://webkod.pl/owoce.html#ulubiony-owoc" rel="bookmark" shape="poly" coords="16,69,200,28,180,214" alt="artykuł o moim ulubionym owocu">
          </map>

          Bezpośredni odnośnik do artykułu: <img src="http://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-17" alt="http://webkod.pl/owoce.html#ulubiony-owoc">
        </footer>
      </article>
    </main>

  </body>
</html>

Ponieważ do przykładowego elementu "area" został dodany atrybut "rel" wraz z wartością "bookmark" wspomniany element "area" zawiera dodatkową informację dla przeglądarki internetowej o tym, że wspomniany element "area" reprezentuje bezpośredni odnośnik do treści reprezentowanej przez zawartość elementu "article", który to element "article" jest pierwszym w kolejności odszukanym elementem przodkiem typu "article" wspomnianego elementu "area".

help

Wartość help oznacza, że dany element area reprezentuje zasób internetowy, który pełni rolę informacji pomocniczych o treści reprezentowanej przez zawartość elementu HTML, który jest elementem rodzicem wspomnianego elementu area.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <main>
      <article>
        <h2>Mój ulubiony owoc</h2>
        <p>
          <map name="mapa-18">
            <area href="https://pl.wikipedia.org/wiki/Czere%C5%9Bnia" rel="help" shape="poly" coords="16,69,200,28,180,214" alt="charakterystyka czereśni">
          </map>

          Moim ulubionym owocem jest <b>czereśnia</b> (<img src="http://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-18" alt="czereśnia?">).
        </p>
        <img src="http://webkod.pl/files/html/owoc-01.png" alt="zdjęcie czereśni">
        <p>Ponieważ uwielbiam ten czereśniowy smak.</p>
      </article>
    </main>

  </body>
</html>

Ponieważ do przykładowego elementu "area" został dodany atrybut "rel" wraz z wartością "help" wspomniany element "area" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy reprezentowany przez wspomniany element "area" zawiera dodatkowe informacje pomocnicze o treści reprezentowanej przez zawartość elementu rodzica wspomnianego elementu "area".

license

Wartość license oznacza, że dany element area reprezentuje zasób internetowy, który pełni rolę informacji o tym, na jakiej licencji opiera się treść reprezentowana przez zawartość elementu main danego dokumentu HTML.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <main>
      <article>
        <h2>Mój ulubiony owoc</h2>
        <p>Moim ulubionym owocem jest <b>czereśnia</b>.</p>
        <img src="http://webkod.pl/files/html/owoc-01.png" alt="zdjęcie czereśni">
        <p>Ponieważ uwielbiam ten czereśniowy smak.</p>
      </article>

      <p>
        <map name="mapa-19">
          <area href="licencja-mit.html" rel="license" shape="poly" coords="16,69,200,28,180,214" alt="szczegóły Licencji Mit">
        </map>

        <small>Artykuły znajdujące się na tej stronie internetowej opierają się na <img src="http://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-19" alt="Licencji Mit"></small>
      </p>
    </main>

  </body>
</html>

Ponieważ do przykładowego elementu "area" został dodany atrybut "rel" wraz z wartością "license" wspomniany element "area" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy reprezentowany przez wspomniany element "area" zawiera informacje o tym, na jakiej licencji opiera się treść reprezentowana przez zawartość elementu "main" występującego w zawartości danego dokumentu HTML.

next

Wartość next oznacza, że dany dokument HTML jest częścią serii, dlatego zasób internetowy reprezentowany przez dany element area jest następnym w kolejności zasobem internetowym w danej serii.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <main>
      <article>
        <h2>Mój ulubiony owoc</h2>
        <p>Moim ulubionym owocem jest <b>czereśnia</b>.</p>
        <img src="http://webkod.pl/files/html/owoc-01.png" alt="zdjęcie czereśni">
        <p>Ponieważ uwielbiam ten czereśniowy smak.</p>
      </article>

      <nav>
        <ol>
          <li>
            <a href="warzywa.html" rel="prev">warzywa</a>
          </li>

          <li>
            <map name="mapa-20">
              <area href="kwiaty.html" rel="next" shape="poly" coords="16,69,200,28,180,214" alt="artykuł o kwiatach">
            </map>

            <img src="http://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-20" alt="kwiaty">
          </li>
        </ol>
      </nav>
    </main>

  </body>
</html>

Ponieważ do przykładowego elementu "area" został dodany atrybut "rel" wraz z wartością "next" wspomniany element "area" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy reprezentowany przez wspomniany element "area" jest następnym w kolejności zasobem internetowym w danej serii.

nofollow

Wartość nofollow oznacza, że dany element area reprezentuje zasób internetowy, który z różnych względów nie jest potwierdzonym, zaufanym, sprawdzonym przez autora danego dokumentu HTML zasobem internetowym. Wartość nofollow może również oznaczać, że dany element area został dołączony do zawartości danego dokumentu HTML, ponieważ głównie wynika to z różnych komercyjnych umów pomiędzy przynajmniej dwoma osobami lub organizacjami.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <main>
      <article>
        <h2>Mój ulubiony owoc</h2>
        <p>Moim ulubionym owocem jest <b>czereśnia</b>.</p>
        <img src="http://webkod.pl/files/html/owoc-01.png" alt="zdjęcie czereśni">
        <p>Ponieważ uwielbiam ten czereśniowy smak.</p>

        <footer>
          <map name="mapa-21">
            <area href="https://pl.wikipedia.org/wiki/Czere%C5%9Bnia" rel="nofollow" shape="poly" coords="16,69,200,28,180,214" alt="charakterystyka czereśni">
          </map>

          Zobacz więcej informacji o <img src="http://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-21" alt="czereśni">
        </footer>
      </article>
    </main>

  </body>
</html>

Ponieważ do przykładowego elementu "area" został dodany atrybut "rel" wraz z wartością "nofollow" wspomniany element "area" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy reprezentowany przez wspomniany element "area" nie jest sprawdzonym przez autora danego dokumentu HTML zasobem internetowym.

noreferrer

Wartość noreferrer oznacza, że gdy użytkownik kliknie na dany element area w celu przeniesienia się do zasobu internetowego reprezentowanego przez wspomniany element area, informacje o adresie URL dokumentu HTML, w którym znajdował się wspomniany element area (tzw. informacje HTTP REFERER) nie zostaną wysłane przez przeglądarkę internetową użytkownika do docelowego serwera, na którym znajduje się zasób internetowy reprezentowany przez wspomniany element area.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <main>
      <article>
        <h2>Mój ulubiony owoc</h2>
        <p>Moim ulubionym owocem jest <b>czereśnia</b>.</p>
        <img src="http://webkod.pl/files/html/owoc-01.png" alt="zdjęcie czereśni">
        <p>Ponieważ uwielbiam ten czereśniowy smak.</p>

        <footer>
          <map name="mapa-22">
            <area href="https://pl.wikipedia.org/wiki/Czere%C5%9Bnia" rel="noreferrer" shape="poly" coords="16,69,200,28,180,214" alt="charakterystyka czereśni">
          </map>

          Zobacz więcej informacji o <img src="http://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-22" alt="czereśni">
        </footer>
      </article>
    </main>

  </body>
</html>

Ponieważ do przykładowego elementu "area" został dodany atrybut "rel" wraz z wartością "noreferrer" wspomniany element "area" zawiera dodatkową informację dla przeglądarki internetowej o tym, że w momencie kliknięcia na wspomniany element "area" informacje HTTP REFERER nie powinny zostać wysłane przez wspomnianą przeglądarkę internetową do serwera, na którym znajduje się zasób internetowy reprezentowany przez wspomniany element "area".

prefetch

Wartość prefetch oznacza, że zasób internetowy reprezentowany przez dany element area powinien znaleźć się w pamięci podręcznej przeglądarki internetowej (tzw. CACHE), ponieważ istnieje duże prawdopodobieństwo, że użytkownik odwiedzający dany dokument HTML będzie wkrótce potrzebował wspomnianego zasobu internetowego.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <main>
      <article>
        <h2>Mój ulubiony owoc</h2>
        <p>Moim ulubionym owocem jest <b>czereśnia</b>.</p>
        <img src="http://webkod.pl/files/html/owoc-01.png" alt="zdjęcie czereśni">
        <p>Ponieważ uwielbiam ten czereśniowy smak.</p>

        <footer>
          <map name="mapa-23">
            <area href="warzywa.html" rel="prefetch" shape="poly" coords="16,69,200,28,180,214" alt="artykuł o warzywach">
          </map>

          Zobacz również: <img src="http://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-23" alt="warzywa">
        </footer>
      </article>
    </main>

  </body>
</html>

Ponieważ do przykładowego elementu "area" został dodany atrybut "rel" wraz z wartością "prefetch" wspomniany element "area" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy reprezentowany przez wspomniany element "area" powinien znaleźć się w pamięci podręcznej wspomnianej przeglądarki internetowej.

prev

Wartość prev oznacza, że dany dokument HTML jest częścią serii, dlatego zasób internetowy reprezentowany przez dany element area jest poprzednim w kolejności zasobem internetowym w danej serii.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <main>
      <article>
        <h2>Mój ulubiony owoc</h2>
        <p>Moim ulubionym owocem jest <b>czereśnia</b>.</p>
        <img src="http://webkod.pl/files/html/owoc-01.png" alt="zdjęcie czereśni">
        <p>Ponieważ uwielbiam ten czereśniowy smak.</p>
      </article>

      <nav>
        <ol>
          <li>
            <map name="mapa-24">
              <area href="warzywa.html" rel="prev" shape="poly" coords="16,69,200,28,180,214" alt="artykuł o warzywach">
            </map>

            <img src="http://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-24" alt="warzywa">
          </li>

          <li>
            <a href="kwiaty.html" rel="next">kwiaty</a>
          </li>
        </ol>
      </nav>
    </main>

  </body>
</html>

Ponieważ do przykładowego elementu "area" został dodany atrybut "rel" wraz z wartością "prev" wspomniany element "area" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy reprezentowany przez wspomniany element "area" jest poprzednim w kolejności zasobem internetowym w danej serii.

Wartość search oznacza, że dany element area reprezentuje zasób internetowy (np. typu OpenSearch), który zawiera informacje, które mogą zostać wykorzystane w celu przeszukania treści reprezentowanej przez zawartość danego dokumentu HTML lub treści reprezentowanej przez zawartość zasobów internetowych powiązanych ze wspomnianym dokumentem HTML.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <main>
      <article>
        <h2>Mój ulubiony owoc</h2>
        <p>Moim ulubionym owocem jest <b>czereśnia</b>.</p>
        <img src="http://webkod.pl/files/html/owoc-01.png" alt="zdjęcie czereśni">
        <p>Ponieważ uwielbiam ten czereśniowy smak.</p>

        <aside>
          <map name="mapa-25">
            <area href="szukaj-owoce.xml" rel="search" shape="poly" coords="16,69,200,28,180,214" alt="wyszukiwarka xml">
          </map>

          <img src="http://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-25" alt="Szukaj">
        </aside>
      </article>
    </main>

  </body>
</html>

Ponieważ do przykładowego elementu "area" został dodany atrybut "rel" wraz z wartością "search" wspomniany element "area" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy reprezentowany przez wspomniany element "area" może zostać wykorzystany przez jeden z mechanizmów przeglądarki internetowej w celu przeszukania treści reprezentowanej przez zawartość danego dokumentu HTML.

tag

Wartość tag oznacza, że zasób internetowy reprezentowany przez dany element area odnosi się również do treści reprezentowanej przez zawartość dokumentu HTML, w którym znajduje się wspomniany element area.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <main>
      <article>
        <h2>Mój ulubiony owoc</h2>
        <p>Moim ulubionym owocem jest <b>czereśnia</b>.</p>
        <img src="http://webkod.pl/files/html/owoc-01.png" alt="zdjęcie czereśni">
        <p>Ponieważ uwielbiam ten czereśniowy smak.</p>

        <footer>
          <map name="mapa-26">
            <area href="https://pl.wikipedia.org/wiki/Czere%C5%9Bnia" rel="tag" shape="poly" coords="16,69,200,28,180,214" alt="charakterystyka czereśni">
          </map>

          Zobacz więcej informacji o <img src="http://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-26" alt="czereśni">
        </footer>
      </article>
    </main>

  </body>
</html>

Ponieważ do przykładowego elementu "area" został dodany atrybut "rel" wraz z wartością "tag" wspomniany element "area" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy reprezentowany przez wspomniany element "area" odnosi się również do treści reprezentowanej przez zawartość danego dokumentu HTML.

shape

Przeznaczenie atrybutu shape

Atrybut shape wykorzystany wraz z elementem area określa bazowy kształt klikalnego obszaru reprezentowanego przez dany element area.

Wartość domyślna

rect (w każdej sytuacji)

Wartości atrybutu shape

rect

Wartość rect oznacza kształt prostokąta.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-9">
      <area href="http://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-video" shape="rect" coords="172,23,279,130" alt="opis elementu - video">
    </map>

    <img src="http://webkod.pl/files/html/klikalna-mapa-02.png" usemap="#mapa-9" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

Rezultat

opis elementu - video mapa z jednym klikalnym obszarem

Klikalny obszar reprezentowany przez przykładowy element "area" na mapie klikalnych obszarów reprezentowanej przez element "map" może posiadać kształt prostokąta, ponieważ do wspomnianego elementu "area" został dodany atrybut "shape" wraz z wartością "rect".

circle

Wartość circle oznacza kształt koła.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-10">
      <area href="http://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-object" shape="circle" coords="74,227,56" alt="opis elementu - object">
    </map>

    <img src="http://webkod.pl/files/html/klikalna-mapa-02.png" usemap="#mapa-10" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

Rezultat

opis elementu - object mapa z jednym klikalnym obszarem

Klikalny obszar reprezentowany przez przykładowy element "area" na mapie klikalnych obszarów reprezentowanej przez element "map" może posiadać kształt koła, ponieważ do wspomnianego elementu "area" został dodany atrybut "shape" wraz z wartością "circle".

poly

Wartość poly oznacza kształt wielokąta.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-11">
      <area href="http://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-embed" shape="poly" coords="175,171,253,163,209,207,269,188,265,278,231,238,192,278" alt="opis elementu - embed">
    </map>

    <img src="http://webkod.pl/files/html/klikalna-mapa-02.png" usemap="#mapa-11" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

Rezultat

opis elementu - embed mapa z jednym klikalnym obszarem

Klikalny obszar reprezentowany przez przykładowy element "area" na mapie klikalnych obszarów reprezentowanej przez element "map" może posiadać kształt wielokąta, ponieważ do wspomnianego elementu "area" został dodany atrybut "shape" wraz z wartością "poly".

default

Wartość default oznacza kształt całego obrazka.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-12">
      <area href="http://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-audio" shape="default" alt="opis elementu - audio">
    </map>

    <img src="http://webkod.pl/files/html/klikalna-mapa-02.png" usemap="#mapa-12" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

Rezultat

opis elementu - audio mapa z jednym klikalnym obszarem

Klikalny obszar reprezentowany przez przykładowy element "area" na mapie klikalnych obszarów reprezentowanej przez element "map" posiada kształt całego obrazka, ponieważ do wspomnianego elementu "area" został dodany atrybut "shape" wraz z wartością "default".

target

Przeznaczenie atrybutu target

Atrybut target wykorzystany wraz z elementem area określa kontekst (miejsce) wczytania się zasobu internetowego reprezentowanego przez dany element area.

Atrybut "target" ma sens tylko wtedy gdy dany element "area" posiada atrybut href.

Wartość domyślna

_self (gdy pominęliśmy atrybut)

_blank (gdy podaliśmy wartość nieprawidłową)

Wartości atrybutu target

_blank

Wartość _blank wskazuje na nowy kontekst przeglądarki internetowej, na nowe miejsce. Na przykład na nowe okno przeglądarki internetowej (nową zakładkę).

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-13">
      <area href="http://webkod.pl/files/html/zwierze-01.png" target="_blank" shape="poly" coords="16,69,200,28,180,214" alt="kliknij, aby zobaczyć zdjęcie lwa">
    </map>

    <img src="http://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-13" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

Rezultat

kliknij, aby zobaczyć zdjęcie lwa mapa z jednym klikalnym obszarem

Po kliknięciu na obszar przykładowego elementu "area" zasób internetowy reprezentowany przez wspomniany element "area" zostanie wczytany do nowego okna przeglądarki internetowej, ponieważ do wspomnianego elementu "area" został dodany atrybut "target" wraz z wartością "_blank".

_parent

Wartość _parent wskazuje na kontekst rodzica kontekstu przeglądarki internetowej, do którego należy dany element area.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="http://webkod.pl/files/html/area-target-parent.html"></iframe>
    <!-- KOD HTML PLIKU - area-target-parent.html -->
    <!--
      <!DOCTYPE HTML>
      <html>
        <head>
          <title>Atrybut target - wartość _parent</title>
        </head>
        <body>

          <map name="mapa-1">
            <area href="http://webkod.pl/files/html/zwierze-01.png" target="_parent" shape="poly" coords="16,69,200,28,180,214" alt="kliknij, aby zobaczyć zdjęcie lwa">
          </map>

          <img src="http://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-1" alt="mapa z jednym klikalnym obszarem">

        </body>
      </html>
    -->

  </body>
</html>

Rezultat

Przykładowy element "area" znajduje się w elemencie "iframe", którego kontekstem rodzicem w tym wypadku jest aktualne okno przeglądarki internetowej, ponadto po kliknięciu na obszar przykładowego elementu "area" zasób internetowy reprezentowany przez wspomniany element "area" zostanie wczytany do kontekstu rodzica wspomnianego elementu "iframe", ponieważ do wspomnianego elementu "area" został dodany atrybut "target" wraz z wartością "_parent".

Jeżeli kontekst przeglądarki internetowej, do którego należy dany element "area" nie posiada kontekstu rodzica, wtedy docelowym kontekstem jest ten kontekst, który określa wartość _self.

_self

Wartość _self wskazuje na aktualny kontekst przeglądarki internetowej, do którego należy dany element area. Na przykład na aktualne okno przeglądarki internetowej (aktualną zakładkę) lub aktualny element iframe.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="http://webkod.pl/files/html/area-target-self.html"></iframe>
    <!-- KOD HTML PLIKU - area-target-self.html -->
    <!--
      <!DOCTYPE HTML>
      <html>
        <head>
          <title>Atrybut target - wartość _self</title>
        </head>
        <body>

          <map name="mapa-1">
            <area href="http://webkod.pl/files/html/zwierze-01.png" target="_self" shape="poly" coords="16,69,200,28,180,214" alt="kliknij, aby zobaczyć zdjęcie lwa">
          </map>

          <img src="http://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-1" alt="mapa z jednym klikalnym obszarem">

        </body>
      </html>
    -->

  </body>
</html>

Rezultat

Aktualnym kontekstem przykładowego elementu "area" jest element "iframe", w którym to elemencie "iframe" znajduje się wspomniany element "area", ponadto po kliknięciu na obszar przykładowego elementu "area" zasób internetowy reprezentowany przez wspomniany element "area" zostanie wczytany do wspomnianego elementu "iframe", ponieważ do wspomnianego elementu "area" został dodany atrybut "target" wraz z wartością "_self".

_top

Wartość _top wskazuje na kontekst najdalszego przodka kontekstu przeglądarki internetowej, do którego należy dany element area.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="http://webkod.pl/files/html/area-target-top.html"></iframe>
    <!-- KOD HTML PLIKU - area-target-top.html -->
    <!--
      <!DOCTYPE HTML>
      <html>
        <head>
          <title>Atrybut target - wartość _top</title>
        </head>
        <body>

          <map name="mapa-1">
            <area href="http://webkod.pl/files/html/zwierze-01.png" target="_top" shape="poly" coords="16,69,200,28,180,214" alt="kliknij, aby zobaczyć zdjęcie lwa">
          </map>

          <img src="http://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-1" alt="mapa z jednym klikalnym obszarem">

        </body>
      </html>
    -->

  </body>
</html>

Rezultat

Przykładowy element "area" znajduje się w elemencie "iframe", którego najdalszym kontekstem przodkiem w tym wypadku jest aktualne okno przeglądarki internetowej, ponadto po kliknięciu na obszar przykładowego elementu "area" zasób internetowy reprezentowany przez wspomniany element "area" zostanie wczytany do kontekstu najdalszego przodka wspomnianego elementu "iframe", ponieważ do wspomnianego elementu "area" został dodany atrybut "target" wraz z wartością "_top".

Jeżeli kontekst przeglądarki internetowej, do którego należy dany element "area" nie posiada kontekstu najdalszego przodka, wtedy docelowym kontekstem jest ten kontekst, który określa wartość _self.

iframe name

Należy podać wartość atrybutu name interesującego nas elementu iframe, dzięki czemu interesujący nas element iframe stanie się docelowym kontekstem.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe name="ramka-1"></iframe>

    <map name="mapa-14">
      <area href="http://webkod.pl/files/html/zwierze-01.png" target="ramka-1" shape="poly" coords="16,69,200,28,180,214" alt="kliknij, aby zobaczyć zdjęcie lwa">
    </map>

    <img src="http://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-14" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

Rezultat

kliknij, aby zobaczyć zdjęcie lwa mapa z jednym klikalnym obszarem

Po kliknięciu na obszar przykładowego elementu "area" zasób internetowy reprezentowany przez wspomniany element "area" zostanie wczytany do elementu "iframe", który posiada atrybut "name" o wartości "ramka-1", ponieważ do wspomnianego elementu "area" został dodany atrybut "target" wraz z wartością "ramka-1".

Jeżeli w danym kontekście przeglądarki internetowej, do którego należy dany element "area" lub w kontekście rodzicu lub w kontekście przodku nie znajduje się element iframe o wartości atrybutu name, którą podaliśmy, wtedy docelowym kontekstem jest ten kontekst, który określa wartość _blank.

Możemy podać również wartość atrybutu name interesującego nas elementu object, lecz tylko wtedy gdy wspomniany element object reprezentuje zasób internetowy w postaci dokumentu HTML.

type

Przeznaczenie atrybutu type

Atrybut type wykorzystany wraz z elementem area określa informację o typie MIME, jaki posiada zasób internetowy reprezentowany przez dany element area.

Atrybut "type" ma sens tylko wtedy gdy dany element "area" posiada atrybut href.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu type

typ MIME

Należy podać ciąg znaków w formie typu MIME.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-8">
      <area href="http://webkod.pl/files/html/zwierze-01.png" type="image/png" shape="poly" coords="16,69,200,28,180,214" alt="kliknij, aby zobaczyć zdjęcie lwa">
    </map>

    <img src="http://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-8" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

Rezultat

kliknij, aby zobaczyć zdjęcie lwa mapa z jednym klikalnym obszarem

Ponieważ do przykładowego elementu "area" został dodany atrybut "type" wraz z wartością "image/png" wspomniany element "area" reprezentujący zasób internetowy znajdujący się pod adresem "http://webkod.pl/files/html/zwierze-01.png" zawiera dodatkową informację dla przeglądarki internetowej o tym, że typem MIME, jaki posiada wspomniany zasób internetowy jest typ wskazujący na plik typu PNG.