Карта изображений с кликабельными областями:
<img src="workplace.jpg" alt="Рабочее место" usemap="#workmap" width="400"
height="379">
<map name="workmap">
<area shape="rect"
coords="34,44,270,350" alt="Компьютер" href="computer.htm">
<area
shape="rect" coords="290,172,333,250" alt="Телефон" href="phone.htm">
<area
shape="circle" coords="337,300,44" alt="Чашка кофе" href="coffee.htm">
</map>
Попробуйте сами »
Определение и использование <area>
Тег <area>
определяет область внутри карты изображений (карта изображений - это изображение с кликабельными областями).
Элементы <area>
всегда вложены в тег <map>.
Примечание: Атрибут usemap в <img> связан с элементами <map> именем атрибута и создает связь между изображением и картой.
Поддержка браузеров <area>
Элемент | |||||
---|---|---|---|---|---|
<area> | Да | Да | Да | Да | Да |
Атрибуты <area>
Атрибут | Значение | Описание |
---|---|---|
alt | text | Задает альтернативный текст для области. Требуется, если присутствует атрибут href |
coords | coordinates | Задает координаты области |
download | filename | Указывает, что целевой объект будет загружен, когда пользователь нажмет на гиперссылку |
href | URL | Задает ссылку на область |
hreflang | language_code | Указывает язык целевого URL адреса |
media | media query | Указывает, для какого носителя/устройства оптимизирован целевой URL адрес |
rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag |
Указывает связь между текущим документом и целевым URL адресом |
shape |
default rect circle poly |
Задает форму области |
target | _blank _parent _self _top framename |
Указывает, где открыть целевой URL адрес |
type | media_type | Указывает тип носителя целевого URL адреса |
Глобальные атрибуты <area>
Тег <area>
также поддерживает Глобальные атрибуты в HTML.
События атрибутов <area>
Тег <area>
также поддерживает События атрибутов в HTML.
Еще примеры <area>
Еще одна карта изображений, с кликабельными областями:
<img src="planets.gif"
width="145" height="126"
alt="Планеты"
usemap="#planetmap">
<map
name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Солнце">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Меркурий">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Венера">
</map>
Попробуйте сами »
Связанные страницы <area>
HTML DOM справочник: Объект area
Настройки CSS по умолчанию <area>
Большинство браузеров будут отображать элемент <area>
со следующими значениями по умолчанию:
area {
display: none;
}