Закрыть ... [X]

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>


Поделись с друзьями



Рекомендуем посмотреть ещё:



Как создать простую веб страницу с помощью HTML Букет из мягких игрушек поэтапно фото

Как сделать закрывающий документ Оформляем html-страницу и форматируем текст
Как сделать закрывающий документ Iframe и Frame что это такое и как лучше
Как сделать закрывающий документ Секреты Word. Поиск и замена текста
Как сделать закрывающий документ Создание HTML страниц в
Как сделать закрывающий документ Структура HTML -кода
Как сделать закрывающий документ Как вставить в HTML
Как сделать закрывающий документ Тег area
Как сделать закрывающий документ
Как сделать закрывающий документ Tutorial Как сделать себе инвентарь с картинкой


ШОКИРУЮЩИЕ НОВОСТИ