Tag HTML <map>

Definicja i użycie

<map> potrzebuje etykiety do zdefiniowania mapy obrazu. Mapa obrazu (image map, rodzaj nawigacyjnej mapy sektorowej) to obraz z obszarem klikalnym.

<map> element atrybutem nameten atrybut jest związany z element <img> przy Atrybut usemap powiązanych, tworząc relację między obrazem a mapą.

<map> zawiera kilka Element <area>definiuje obszary klikalne na mapie obrazu.

Zobacz również:

Podręcznik HTML DOM:Obiekt Map

Przykład

Przykład 1

Obraz mapy z obszarem klikalnym:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

Spróbuj sam

Przykład 2

Inny obraz mapy z obszarem klikalnym:

<img src="solarsystem.png" width="1024" height="576" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,114,576" alt="Sun" href="sun.html">
  <area shape="circle" coords="190,230,5" alt="Mercury" href="mercury.html">
  <area shape="circle" coords="228,230,5" alt="Venus" href="venus.html">
</map>

Spróbuj sam

Atrybut

Atrybut Wartość Opis
name Nazwa mapy Wymagane. Określa nazwę mapy obrazowej.

Globalne atrybuty

<map> Tagi te wspierają również Globalne atrybuty HTML.

Atrybuty zdarzeń

<map> Tagi te wspierają również Atrybuty zdarzeń w HTML.

Domyślne ustawienia CSS

Większość przeglądarek wyświetli wartości domyślne poniżej: <map> Elementy:

map {
  display: inline;
}

Obsługa przeglądarek

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie