Ostatnio edytowany:

map

Autor: Virtual Patriot

Przeznaczenie elementu map

Element map reprezentuje mapę klikalnych obszarów, która może zostać powiązana z elementem img lub która może zostać powiązana z elementem object (lecz tylko gdy wspomniany element object reprezentuje zasób internetowy w postaci obrazka).

Dodatkowe techniczne informacje 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
składnia HTML
  • <map> ... </map>
pominięcie tagu na początku
  • nigdy
pominięcie tagu na końcu
  • nigdy
CSS display
  • inline

Dodatkowe 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

name

Przeznaczenie atrybutu name

Atrybut name wykorzystany wraz z elementem map określa nazwę, jaka powinna zostać przypisana do danego elementu 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="http://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-audio" shape="poly" coords="19,26,19,130,129,130" alt="opis elementu - audio">
      <area href="http://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-video" shape="rect" coords="172,23,279,130" alt="opis elementu - video">
      <area href="http://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-object" shape="circle" coords="74,227,56" alt="opis elementu - object">
      <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-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ą mapy klikalnych obszarów reprezentowanej przez przykładowy element "map" jest nazwa "mapa-1", ponieważ do wspomnianego elementu "map" został dodany atrybut "name" wraz z wartością "mapa-1".

Każdy element "map" występujący w zawartości tego samego dokumentu HTML powinien posiadać swoją własną unikalną wartość atrybutu "name".

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