HTML - тег <map>
Пример
Карта изображения с кликабельными областями:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400"
height="379">
<map name="workmap">
<area shape="rect"
coords="34,44,270,350" alt="Computer" href="computer.htm">
<area
shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Тег <map>используется для определения карты изображения. Карта изображения — это изображение с кликабельными областями.
Обязательный атрибут name <map>элемента связан с атрибутом usemap элемента <img> и создает связь между изображением и картой.
Элемент <map>содержит ряд элементов <area> , определяющих кликабельные области на карте изображения.
Поддержка браузера
| Element | |||||
|---|---|---|---|---|---|
| <map> | Yes | Yes | Yes | Yes | Yes |
Атрибуты
| Attribute | Value | Description |
|---|---|---|
| name | mapname | Required. Specifies the name of the image map |
Глобальные атрибуты
Тег <map>также поддерживает глобальные атрибуты в HTML .
Атрибуты события
Тег <map>также поддерживает атрибуты событий в HTML .
Дополнительные примеры
Пример
Еще одна карта изображений с интерактивными областями:
<img src="planets.gif"
width="145" height="126"
alt="Planets"
usemap="#planetmap">
<map
name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
Связанные страницы
Справочник по HTML DOM: объект карты
Настройки CSS по умолчанию
Большинство браузеров будут отображать <map>элемент со следующими значениями по умолчанию:
map {
display: inline;
}