| 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-тип документа, на який веде посилання.
Також для цього тега доступні універсальні атрибути і події .
Закриваючий тег
Чи не потрібно.
Приклад
HTML5 IE Cr Op Sa Fx
<!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>