Синтаксис
Описание
Тег <area> (от англ. area — область, регион) определяет интерактивную область в изображении-карте. При клике на определённую область изображения происходят определённые действия.
Необходимо использовать тег <img> и его атрибут usemap, так как он связан с тегом <map> атрибутом name и создает связь между изображением и картой.
Тег <area> не нужно закрывать.
Внимание!
Элемент <area> всегда должен быть вложен в тег <map>.
Атрибуты, которые можно использовать в теге <area>, указаны ниже. Также тег поддерживает и глобальные атрибуты.
Атрибуты
| Атрибут | Значение | Описание |
| accesskey | символ | Переход к области с помощью комбинации клавиш |
| alt | text | Альтернативный текст для области. Обязателен, если присутствует атрибут href |
| coords | coordinates | Координаты области |
| download | filename | Указывает, что целевой объект будет загружен, когда пользователь нажмет на гиперссылку |
| href |
URL-адрес |
Целевой объект гиперссылки для области |
| hreflang | код языка | Указывает язык связанного документа |
| media | media_query | Указывает, какие носители/устройства оптимизированы для связанного документа |
| nohref | значение | Устарел. Указывает, что в области отсутствует связанная ссылка |
| referrerpolicy | значение | Строка, указывающая, какой реферер использовать при извлечении ресурса |
| rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag |
Указывает связь между текущим документом и связанным документом |
| rev | text | Устарел. Указывает связь между связанным документом и текущим документом |
| shape | default rect circle poly |
Задает форму области ссылки |
| tabindex | value | Числовое значение, указывающее положение определенной области в порядке перехода в браузере |
| target | _blank _parent _self _top framename |
Указывает, где открыть связанный документ |
| type | media_type | Указывает тип носителя связанного документа |
Пример
HTML-код:
Отображение в браузере:
Параметры CSS по умолчанию
area {
display: none;
}
Поддержка браузера
|
Элемент |
Chrome |
Opera |
Firefox |
Safari |
Microsoft Edge |
| <area> | Да | Да | Да | Да | Да |
Продолжаем добавлять языки программирования для Вас.
Впереди много интересного!
Только свежие новости программирования и технологий каждый день.
Комментарии