Тег <area> HTML5

Пример

Создание карты изображения:

<img src="/images/353915main_image_1377_428-321.gif" alt="Planets" width="350" height="263" usemap="#planetmap">

<map id="planetmap" name="planetmap">
<area shape="rect" coords="203,104,343,241" alt="Sun" title="sun" href="/tryit/sun.html">
<area shape="circle" coords="92,98,56" alt="Mercury" title="Mercury" href="/tryit/mercury.html">
</map>

Результат выполнения кода выше:

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

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

тег <area> поддерживается во всех ведущих браузерах

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

Тег <area> определяет область внутри изображения-карты (изображение-карта это изображение с интерактивными областями).

Элементы области всегда вложены внутрь тега <map>.

Примечание: атрибут usemap в теге <img> связан с атрибутом name элемента map, а также создает связь между изображением и картой.

Разница между HTML 4.01 и HTML5

HTML5 имеет несколько новых атрибутов, и несколько атрибутов HTML 4.01 больше не поддерживаются.

Атрибуты

Новое : Новое в HTML5.

Арибут	Значение	Описание
alt	текст	Указывает альтернативный текст для области. Обязателен, если атрибут href указан
coords	координаты	Указывает координаты области
href	URL	Указывает адрес цели области
hreflangНовое	код языка	Указывает язык адреса цели
mediaНовое	запрос медиа	Указывает, что медиа/устройства целевого URL оптимизированы. Значение по умолчанию: all
nohref	nohref	Не поддерживается в HTML5
relНовое	alternate author bookmark external help license next nofollow noreferrer prefetch prev search sidebar tag	Определяет отношения между текущим документом и документом цели
shape	rect rectangle circ circle poly polygon	Указывает фигуру области
target	_blank _parent _self _top имя фрейма	Определяет где открыть документ цели
typeНовое	тип медиа	Определяет тип медиа документа цели

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

Тег <area> поддерживает Глобальные атрибуты в HTML5.

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

Тег <area> поддерживает Атрибуты событий в HTML5.

Была ли эта информация полезной?

Да Нет