HTML <map> тег

  • Предыдущая страница <main>
  • Следующая страница <mark>

Определение и использование

<map> тег для определения image map. Image map (карта с clickable regionами, также известная как навигационная карта) - это изображение с clickable regionами.

<map> элемент需要一个 атрибута nameявляется свойством элемента <img> для Атрибут usemap связанных элементов, которые создают связь между изображением и картой.

<map> включает в себя несколько Элемент <area>определяет clickable region в image map.

См. также:

HTML DOM справочник:Объект Map

Пример

Пример 1

Интерактивная карта с clickable regionами:

<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>

Попробуйте сами

Пример 2

Еще одна интерактивная карта с clickable regionами:

<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>

Попробуйте сами

Атрибут

Атрибут Значение Описание
name Имя карты Обязателен. Определяет имя изображения карты.

Глобальные атрибуты

<map> Этот тег также поддерживает Глобальные атрибуты в HTML.

атрибуты событий

<map> Этот тег также поддерживает Атрибуты событий в HTML.

Стандартные настройки CSS

Большинство браузеров будут отображать значения по умолчанию, указанные ниже: <map> Элементы:

map {
  display: inline;
}

Поддержка браузеров

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка
  • Предыдущая страница <main>
  • Следующая страница <mark>