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

Тег <MAP>

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

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

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

Атрибуты

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

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

Тип тега

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

Модель тега: 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.01HTML 5XHTML 1.0XHTML 1.1
Поддержка:ДаДаДаДа

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

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ДаДаДаДаДа