Area html map: Тег | htmlbook.ru — Журнал для женщин и девушек о красоте

Area html map: Тег | htmlbook.ru

11.12.2022 by admin Комментариев нет

Содержание

Тег | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
4.0+	1.0+	2.0+	1.0+	1.0+	1.0+	1.0+

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Каждый элемент <area> определяет активные области
изображения, которые являются ссылками. Рисунок с привязанными к нему активными
областями называется в совокупности картой-изображением. Такая карта по внешнему
виду ничем не отличается от обычного изображения, но при этом оно может быть
разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.
Тег <area> задает форму области, ее размеры,
устанавливает адрес документа, на который следует сделать ссылку, а также имя
окна или фрейма, куда браузер будет загружать документ. Этот тег всегда располагается
в контейнере <map>, который связывает координаты
областей с изображением.

Несколько областей могут перекрывать друг друга, сверху будет та, которая в коде HTML располагается выше.

Синтаксис

HTML	<map> <area href="URL"> </map>
XHTML	<map> <area href="URL" /> </map>

Атрибуты

accesskey: Переход к области с помощью комбинации клавиш.
alt: Альтернативный текст для области изображения.
coords: Координаты активной области.
href: Задает адрес документа, на который следует перейти.
hreflang: Указывает язык документа, на который ведет ссылка.
nohref: Область без ссылки на другой документ.
shape: Форма области.
tabindex: Задает последовательность перехода между элементами с помощью клавиши Tab.
target: Имя окна или фрейма, куда браузер будет загружать документ.
type: Устанавливает MIME-тип документа, на который ведёт ссылка.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег AREA</title>
  <style type="text/css">
   #title {
    line-height: 0; /* Изменяем межстрочное расстояние */
   }
   #title img {
    border: none; /* Убираем рамку вокруг изображения */
   }
  </style>
 </head>
 <body> 
 <div><img src="images/ecctitle.png" 
                alt="Детский образовательный центр"><br>
  <img src="images/navigate.png" 
                alt="Навигация по сайту" usemap="#Navigation"></div>
  <p><map name="Navigation">
  <area shape="poly" coords="113,24,211,24,233,0,137,0" href="inform. html" alt="Информация">
  <area shape="poly" coords="210,24,233,0,329,0,307,24" href="activity.html" alt="Мероприятия">
  <area shape="poly" coords="304,24,385,24,407,0,329,0" href="depart.html" alt="Отделения">
  <area shape="poly" coords="384,24,449,24,473,0,406,0" href="techinfo.html" alt="Техническая информация">
  <area shape="poly" coords="449,24,501,24,525,0,473,0" href="study.html" alt="Обучение">
  <area shape="poly" coords="501,24,560,24,583,0,525,0" href="work.html" alt="Работа">
  <area shape="poly" coords="560,24,615,24,639,0,585,0" href="misk.html" alt="Разное">
  </map></p>
 </body>
</html>

Изображения

Карты-изображения

HTML/Элемент map

Синтаксис

HTML

XHTML

<img src="..." alt="..." usemap="#Name">
...
<map name="Name">
  ...
  <area shape="..." coords="..." href="...">  
  ...
</map>

Описание

Элемент map (от англ. «map» ‒ «карта») создаёт карту-изображения.

Примечание

В некоторых старых браузерах поддерживаются только контейнеры map с элементами area.

Условия использования

Элемент map может располагатся в любом месте тела документа. Внутри данного элемента одновременно могут размещаться либо элементы area, либо элементы a. Комбинирование элементов area и a в одном контейнере map запрещено.
Если в данный элемент вкладываются элементы гиперссылок, то им обязательно добавляются атрибуты «coords» и «shape» с соответствующими значениями.

Поддержка браузерами

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

Спецификация

Верс.	Раздел
HTML
2.0	—
3.2	MAP
4.01	13.6.1 Client-side image maps: the MAP and AREA elements DTD: `Transitional Strict Frameset`
5.0	4.7.11 The map element
5.1	4.7.15. The map element
XHTML
1.0	Extensible HyperText Markup Language DTD: `Transitional Strict Frameset`
1. 1	Extensible HyperText Markup Language

Атрибуты

name: Указывает имя карты-изображения.
Глобальные атрибуты: accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

Пример использования

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Элемент map</title>
</head>
<body>
<h2>Пример использования элемента «map»</h2>
<img src=»/html/html-images/map_area.jpg» alt=»часть меню сайта» usemap=»#Menu»>
<map name=»Menu»>
<!— Задаём активные области —>
<area shape=»rect» coords=»0,1,100,26″ href=»/html/abbr/» alt=»abbr» title=»Аббревиатура»>
<area shape=»rect» coords=»0,27,100,52″ href=»/html/acronym/» alt=»acronym» title=»Акроним»>
<area shape=»rect» coords=»0,53,100,78″ href=»/html/address/» alt=»address» title=»Адрес»>
</map>
</body>
</html>

Элемент map

Тег области HTML

❮ Назад
Полный справочник HTML
Далее ❯

Пример

Карта-изображение с интерактивными областями:

jpg» alt=»Workplace» usemap=»#workmap»
>

<область shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<область shape="circle" coords="337,300,44" alt="Чашка кофе" href="coffee.htm">

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

Другие примеры «Попробуйте сами» ниже.

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

Тег

определяет область внутри карты изображения (карта изображения — это изображение с кликабельными областями).

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

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

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

Элемент
<область>	Да	Да	Да	Да	Да

Атрибуты

Атрибут	Значение	Описание
или	текст	Указывает альтернативный текст для области. Требуется, если присутствует атрибут href
координаты	координаты	Указывает координаты области
скачать	имя файла	Указывает, что цель будет загружена, когда пользователь щелкнет гиперссылку
ссылка	URL-адрес	Указывает цель гиперссылки для области
hreflang	код_языка	Указывает язык целевого URL
носитель	медиа-запрос	Указывает, для какого носителя/устройства оптимизирован целевой URL-адрес.
реферальная политика	без реферера без реферера при переходе на более раннюю версию происхождение происхождение при перекрестном происхождении одно и то же происхождение строгое происхождение при перекрестном происхождении небезопасный URL	Указывает, какую информацию о реферере отправлять со ссылкой
отн.	альтернативный автор закладка помощь лицензия следующий nofollow noreferrer предварительная выборка предыдущая поиск тег	Указывает связь между текущим документом и целевым URL-адресом
форма	по умолчанию прямоугольник круг поли	Задает форму области
цель	_blank _parent _self _top имя кадра	Указывает, где открыть целевой URL
тип	тип_медиа	Указывает тип мультимедиа целевого URL-адреса

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

Тег

также поддерживает глобальные атрибуты в HTML.

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

Тег

также поддерживает атрибуты событий в HTML.

Дополнительные примеры

Пример

Еще одна карта-изображение с интерактивными областями:

gif»

alt=»Планеты»
usemap=»#planetmap»>

<карта имя="карта планеты">

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

Связанные страницы

Справочник HTML DOM :
Area Object

Настройки CSS по умолчанию

Большинство браузеров будут отображать элемент

со следующими значениями по умолчанию:

область {
дисплей: нет;
}

❮ Предыдущий
Полный справочник HTML
Далее ❯

НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА

КОД ИГРЫ

Играть в игру

Основные ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

7 Top5 Examples
Примеры HTML
Примеры CSS
Примеры JavaScript
Как сделать Примеры
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM |
О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.

Координаты области HTML Атрибут

❮ Тег HTML

Пример

Используйте атрибут coords для указания координат каждой области на карте изображения:

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

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

coords Атрибут указывает координаты области на карте изображения.

Атрибут coords используется вместе с атрибутом shape для указания размера, формы и размещения области.

Совет: Координаты верхнего левого угла области равны 0,0.

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

Атрибут
координаты	Да	Да	Да	Да	Да

Синтаксис

<координаты области=" значение «>

Значения атрибутов

Значение	Описание
х1,у1,х2,у2	Указывает координаты верхнего левого и нижнего правого углов прямоугольника (shape=»rect»)
х, у, радиус	Указывает координаты центра и радиуса окружности (shape=»circle»)
x1,y1,x2,y2,..,xn,yn	Указывает координаты ребер полигона. Если первая и последняя пары координат не совпадают, браузер добавит последнюю пару координат, чтобы закрыть многоугольник (shape=»poly»)

❮
HTML-тег

NEW

Мы только что запустили
Видео W3Schools

Узнать

COLOR PICKER

КОД ИГРЫ

Играть в игру

Основные ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

7 Top5 Examples
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM |
О