Area тег: Тег | htmlbook.ru

Leave a Comment / Разное / By /

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+2.0+1.0+1.0+1.0+1.0+

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

HTML:3.24.015.0XHTML:1.01.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 справочник

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

Описание

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.

Пример »
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. Пример »

Примечание: атрибут 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>

Результат данного примера в окне браузера:

Тег области HTML

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


Пример

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

Workplace


 Компьютер
  <область 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»>

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

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

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

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

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

Большинство браузеров будут отображать элемент со следующими значениями по умолчанию:

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

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


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

9003 900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3. CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery


7 Лучшие примеры


7 Лучшие примеры 9086 Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools использует W3. CSS.

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

❮ Тег HTML

Пример

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


Sun
Меркурий
Венера

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

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

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

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

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

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

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

Синтаксис

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

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

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

❮ Тег HTML


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

9003 900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры How To Примеры
Примеры SQL
Примеры Python
Примеры W3.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *