Area map html: Атрибут coords | htmlbook.ru
Тег | HTML справочник
Поддержка браузерами
Описание
HTML тег <area> определяет активные области на изображении, которые являются ссылками, эти области могут отличаться формой и размером. Картинка (изображение) с активными областями, называется картой-изображением. Такая картинка ничем не отличается от обычной, за исключением того, что содержит активные области (ссылки). Области могут перекрывать друг друга, сверху окажется та, которая в коде располагается первее (выше).
Элемент <area> используется только совместно с тегом <map> в качестве его дочернего элемента.
Атрибуты
- alt:
- Определяет альтернативный текст, который будет виден вместо изображения, если оно не может быть отображено (из-за медленной связи, ошибки в атрибуте src и тд).
- coords:
- Атрибут coords указывает координаты активной области на карте-изображения. Он используется вместе с атрибутом shape для указания размера, формы и размещения активной области.
Возможные значения атрибута:
- x1,y1,x2,y2 — указывает координаты верхнего левого и правого нижнего угла прямоугольника (shape=»rect»).
Определение координат для прямоугольника (shape=»rect»):
- x,y,радиус — определяет координаты центра окружности и радиус (shape=»circle»).
Определение координат для окружности (shape=»circle»):
- x1,y1,x2,y2,…,xn,yn — определяет координаты вершин полигона (многоугольника) (shape=»poly»).
Определение координат для многоугольника (shape=»poly»):
Примечание: координаты верхнего левого угла области — 0,0.
Пример » - x1,y1,x2,y2 — указывает координаты верхнего левого и правого нижнего угла прямоугольника (shape=»rect»).
- href:
- Атрибут href указывает адрес страницы, на которую ведет ссылка с активной области изображения, если он не указан или пропущен, то тег <area> не будет являться гиперссылкой. (адрес может быть либо абсолютным либо относительным)
- hreflang:
- Указывает двухбуквенный код языка, определяющий язык страницы, доступной по ссылке. Используется только совместно с атрибутом href и имеет исключительно информативный характер.
Пример » - media:
- Атрибут media определяет тип документа, на который ведет ссылка или указывает, тип устройства, для которого предназначается ссылка (пример: мобильный телефон, принтер и тд.).
Атрибут может принимать несколько значений и используется только совместно с атрибутом href.
- rel:
- Атрибут rel определяет отношение между текущим документом и связанным. Возможные значения атрибута:
- alternate — ссылка на альтернативную версию документа (страница для печати, страница на другом языке и тд.).
- author — ссылка на автора документа.
- bookmark — постоянный URL-адрес, используемый для закладок.
- help — ссылка на документ-справку.
- license — ссылки на сведения об авторских правах для документа.
- next — следующий документ в выделенной области.
- nofollow — ссылка на неиндексируемый документ («nofollow» используется в Google, чтобы указать, что поисковый бот не должен переходить по этой ссылке).
- noreferrer — указание браузеру не посылать HTTP-заголовок если пользователь перешел по ссылке.
- prefetch — указывает, что следует кэшировать целевой документ.
- prev — предыдущий документ в выделенной области.
- search — ссылка на поиск для документа.
- tag — тег (ключевое слово) для текущего документа.
Атрибут rel используется только совместно с атрибутом href.
Пример » - shape:
- Атрибут shape указывает форму области. Он используется совместно с атрибутом coords для указания размера, формы и размещения активной области. Возможные значения атрибута:
- default — определяет весь регион.
- rect — определяет прямоугольную область.
- circle — определяет круглую область.
- poly — определяет многоугольную область.
- target:
- Атрибут target определяет, где будет открыт документ, при переходе по ссылке. Используется только вместе с атрибутом href. Возможные значения атрибута:
- _blank — открывает документ в новом окне или вкладке.
- _parent — открывает документ в родительском фрейме.
- _self — открывает документ в той же директории, где располагается ссылка (значение по умолчанию).
- _top — открывает документ во всю ширину окна.
- имя_фрейма — открывает документ в iframe, имя которого было указано в качестве значения.
Пример »
- type:
- Атрибут type указывает MIME-тип (спецификация форматирования сообщений и кодирования информации для передачи по интернету) документа, на который ведет ссылка. Используется только совместно с атрибутом href.
Пример »
Возможные значения атрибута:
(адрес может быть либо абсолютным либо относительным)
Он используется совместно с атрибутом coords для указания размера, формы и размещения активной области. Возможные значения атрибута:
Примечание: атрибут usemap в теге <img> связан с атрибутом name элемента <map>, и создает связь между картинкой и картой.
Тег <area> так же поддерживает Глобальные атрибуты и События
Стиль по умолчанию
area {
display: none;
}
Пример
<img src="image.png" alt="numbers" usemap="#num1"> <map name="num1"> <area shape="rect" coords="3,2,55,47" href="#" alt="kubik1"> </map> <p>Ссылка расположена на кубике 1, наведите курсор, чтобы убедиться</p>
Результат данного примера в окне браузера:
| WebReference
Элемент <map> (от англ.
map — карта) служит контейнером для элементов <area>, которые определяют активные области для карт-изображений. Такие области устанавливают невидимые зоны на изображении, являющиеся ссылками на HTML-документы. Цель использования <map> — в связывании элемента <img> с клиентской картой-изображением. Эта связь определяется применением единого идентификатора как в <img>, задаваемого атрибутом usemap, так и в <map>, устанавливаемого атрибутом name.
Синтаксис
<map name="<имя>"> <area> </map>
Атрибуты
- name
- Имя карты-изображения.
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>MAP</title>
<style>
#title {
line-height: 0; /* Изменяем межстрочное расстояние */
}
#title img {
border: none; /* Убираем рамку вокруг изображения */
}
</style>
</head>
<body>
<div><img src=»image/ecctitle.
png»
alt=»Детский образовательный центр»><br>
<img src=»image/navigate.png» alt=»Навигация по сайту»
usemap=»#Navigation»></div>
<p><map name=»Navigation»>
<area shape=»poly» coords=»113,24,211,24,233,0,137,0″ href=»page/inform.html» alt=»Информация»>
<area shape=»poly» coords=»210,24,233,0,329,0,307,24″ href=»page/activity.html» alt=»Мероприятия»>
<area shape=»poly» coords=»304,24,385,24,407,0,329,0″ href=»page/depart.html» alt=»Отделения»>
<area shape=»poly» coords=»384,24,449,24,473,0,406,0″ href=»page/techinfo.html» alt=»Техническая информация»>
<area shape=»poly» coords=»449,24,501,24,525,0,473,0″ href=»page/study.html» alt=»Обучение»>
<area shape=»poly» coords=»501,24,560,24,583,0,525,0″ href=»page/work.html» alt=»Работа»>
<area shape=»poly» coords=»560,24,615,24,639,0,585,0″ href=»page/misk.html» alt=»Разное»>
</map></p>
</body>
</html>
Спецификация
| Спецификация | Статус |
|---|---|
| WHATWG HTML Living Standard | Живой стандарт |
| HTML5 | Возможная рекомендация |
HTML 4. 01 Specification | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| 1 | 12 | 1 | 1 | 1 | 1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Изображения
См. также
- <area>
- Карты-изображения
Целевая область HTML Атрибут
❮ Тег HTML
Пример
Используйте атрибут target, чтобы указать, где открыть связанный документ на карте изображения:
Попробуйте сами »
Определение и использование
Атрибут target указывает, где открыть связанный документ.
Используется только при наличии атрибута href .
Поддержка браузера
| Атрибут | |||||
|---|---|---|---|---|---|
| цель | Да | Да | Да | Да | Да |
Синтаксис
Значения атрибутов
| Значение | Описание |
|---|---|
| _пусто | Открывает связанный документ в новом окне или вкладке |
| _себя | Открывает связанный документ в том же фрейме, где он был нажат |
| _родительский | Открывает связанный документ в родительском фрейме |
| _верх | Открывает связанный документ в полном теле окна |
| имя кадра | Открывает связанный документ в именованном iframe |
❮
Тег HTML
ВЫБОР ЦВЕТА
Лучшие учебники
Учебник HTML
Учебник CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.
CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery
1 Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
Справочник по jQuery
Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM |
О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
: Элемент области карты изображения — HTML: язык разметки гипертекста
HTML-элемент
Этот элемент используется только внутри элемента