Autor publikacji
Virtual Patriot - Administrator

map

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu map

Element map reprezentuje mapę klikalnych obszarów, która może zostać powiązana z elementem img za pomocą jego atrybutu usemap.

Dodatkowe artykuły związane z elementem map

Informacje techniczne o elemencie map

kategoria ogólna
kontekst zewnętrzny

element HTML, który tworzy wewnętrzny kontekst frazowany

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 "map" jest element "figure". Wspomniany element "figure" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst frazowany, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "figure", jest prawidłowym kontekstem zewnętrznym dla elementu "map".

kontekst wewnętrzny

kontekst wewnętrzny elementu rodzica

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 wewnętrznym przykładowego elementu "map" są wyłącznie elementy HTML, które są prawidłowym kontekstem wewnętrznym dla elementu rodzica wspomnianego elementu "map", którym to elementem rodzicem w tym wypadku jest element "figure", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "area" oraz element "a", jest prawidłowym kontekstem wewnętrznym dla elementu "map".

wymagane elementy dzieci

brak

wymagane atrybuty

atrybut name

zdolność fallback

nie dotyczy

składnia HTML

<map> ... </map>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

inline

Przypuszczalnie domyślne reguły CSS elementu map

/* brak */

Interpretacja elementu map

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis atrybutów elementu map

Atrybut Lokalny

name

Przeznaczenie atrybutu name

Atrybut name wykorzystany wraz z elementem map pozwala nam określić nazwę, jaką powinna posiadać mapa klikalnych obszarów reprezentowana przez dany element map.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu name

nazwa

Należy podać niepusty oraz pozbawiony jakiegokolwiek białego znaku 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-1">
      <area href="https://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-audio" shape="poly" coords="19,26,19,130,129,130" alt="opis elementu - audio">
      <area href="https://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-video" shape="rect" coords="172,23,279,130" alt="opis elementu - video">
      <area href="https://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-object" shape="circle" coords="74,227,56" alt="opis elementu - object">
      <area href="https://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="https://webkod.pl/files/html/klikalna-mapa-02.png" usemap="#mapa-1" alt="mapa klikalnych obszarów">

  </body>
</html>

Rezultat

opis elementu - audio opis elementu - video opis elementu - object opis elementu - embed mapa klikalnych obszarów

Nazwą, jaką posiada mapa klikalnych obszarów reprezentowana przez przykładowy element "map", jest nazwa "mapa-1", ponieważ do wspomnianego elementu "map" został dodany atrybut "name" wraz z wartością "mapa-1".

W zawartości tego samego dokumentu HTML nie mogą znajdować się elementy "map" posiadające tą samą wartość atrybutu "name".

Wartość ewentualnego atrybutu id danego elementu "map" musi być taka sama jak wartość atrybutu "name" danego elementu "map".