Опубликовано: 25.06.2010 Последняя правка: 08.12.2015

Тег <MAP>

Тег <MAP> применяется для создания клиентской карты изображений. Карта изображений — это зоны обычного изображения, при нажатии на которые происходит активация ссылок связанных с конкретной зоной. Эти зоны называются областями карты изображений. Сами ссылки, а также координаты каждой области задаются при помощи тегов <AREA>, которые находятся внутри элемента <MAP>.

Чтобы связать карту изображений с самим изображением — необходимо тегу <MAP> присвоить имя, а в теге <IMG> указать ссылку на это имя при помощи атрибута usemap.

Вообще, карты изображений можно создавать и при помощи тегов <OBJECT> или <INPUT>. Но такие карты не поддерживаются многими браузерами, поэтому в данном справочнике они не рассматриваются.

Атрибуты

Личные атрибуты:

name — Обязательный атрибут. Присваивает имя карте изображений.

Общие атрибуты:

accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
dir — указывает направление текста внутри элемента.
id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
lang — указывает язык, на котором написан текст внутри HTML-элемента.
style — необходим для применения встроенных стилей CSS к тегу.
tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).
title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.

Тип тега

Назначение: изображения.

Модель тега: inline (встроенный, уровня строки).

Должен содержать: block-теги или теги <AREA>.

Открывающий тег: необходим. Закрывающий тег: необходим.

Синтаксис

<map name="имя карты">содержимое</map>

Пример HTML: применение тега MAP

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Применение тега MAP</title>
 </head>
 <body>
  <p><img src="images/wild.png" width="640" height="142" usemap="#header" alt="Салон красоты Wild kitties">
   <map name="header">
    <area href="files/home.html" shape="poly" coords="19,71,104,71,109,85,104,98,19,98,11,85" alt="Главная">
    <area href="files/novosti.html" shape="poly" coords="126,71,211,71,216,85,211,98,126,98,118,85" alt="Новости">
    <area href="files/uslugi.html" shape="poly" coords="233,71,318,71,323,85,318,98,233,98,225,85" alt="Услуги">
    <area href="files/o_nas.html" shape="poly" coords="339,71,424,71,429,85,424,98,339,98,331,85" alt="О нас">
   </map></p>
 </body>
</html>

Результат примера

Поддержка версиями HTML

Версия:	HTML 4.01	HTML 5	XHTML 1.0	XHTML 1.1
Поддержка:	Да	Да	Да	Да

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

Браузер:	Internet Explorer	Google Chrome	Mozilla Firefox	Opera	Safari
Версия:	6.0 и выше	2.0 и выше	2.0 и выше	9.2 и выше	3.1 и выше
Поддержка:	Да	Да	Да	Да	Да