Тег <area>

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 id="title"><img src="images/ecctitle.png" width="640" height="158" 
                alt="Детский образовательный центр"><br>
  <img src="images/navigate.png" width="640" height="30" 
                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>

Статті на тему


Fatal error: Uncaught Error: Failed opening required '/home/gooli/html.in.ua/www/html/sidebar_right.php' (include_path='.:/usr/local/pear/php82') in /home/gooli/html.in.ua/app/html/area/index.php:139 Stack trace: #0 {main} thrown in /home/gooli/html.in.ua/app/html/area/index.php on line 139