Теги MAP и AREA

  Тег MAP
  Парный тег MAP предназначен для создания так называемой карты изображения.
  Элемент тега MAP связывается с элементом тега IMG или тега OBJECT формирующим в HTML-документе изображение, карту которого надо построить на Web-странице.

  Внутри элемента тега MAP размещаются элементы тега AREA, которые логически разбивают связанное изображение на части, определяющие образы ссылок на связанный с ними контент.

  Если же в элементе тега MAP разместить какой-либо еще контент, то для него тег будет являться обычным строчным тегом.
  Тег MAP атрибуты:
  NAME - Устанавливает уникальное, в пределах HTML-документа, имя карты изображения.

  • Значение:


  • Значение по умолчанию - Нет.
  • Атрибут обязательный.
  Тег AREA
  Тег AREA предназначен для логической разбивки связанного с соответствующим элементом тега MAP изображения на части, в том числе и на области ссылок (части изображения, которые являются образами ссылки).

  Элемент тега AREA и формирует такие области.

  Элемент тега AREA может содержать и какой-либо внутренний контент, однако к нему вообще не применимы стили CSS
  Тег AREA атрибуты:
  HREF - Устанавливает гиперссылку, связанную с этой областью ссылки:

  • Значение:


  • Значение по умолчанию - Нет.
  • Атрибут не обязательный. Несовместим с атрибутом NOHREF.
  NOHREF - Устанавливает область изображения, не связанную ни с какой гиперссылкой.
  Элемент без области ссылки, например, может быть полезен для скрипта.
  Атрибут NOHREF несовместим с атрибутом HREF.
  • Значение:

    • Нет, только присутствие.

  • Значение по умолчанию - Выключен.
  • Атрибут не обязательный.
  ALT - Устанавливает текст для замещения части изображения, выделенной тегом AREA.
  Такой текст появится на Web-странице вместо этой части изображения если в браузере отключена загрузка графики, и(или) во время загрузки графического контента.
  ACCESSKEY - Устанавливает возможность получить фокус ввода для области ссылки не только мышкой, но и с помощью некоторой комбинации клавиш клавиатуры.
  Получение фокуса ввода устанавливает элемент в готовность к выполнению своей функции и активирует все связанные с ним дополнительные сервисы.
  Для гиперссылки это означает, что последующее нажатие клавиши Enter активирует ее.
  • Значение:

    • Латинская буква или цифра.
        К примеру комбинации клавиш для активации контента буквой "C":
      • Internet Explorer - Alt + C
      • Chrome - Alt + C
      • Opera - Shift + Esc + C
      • Safari - Alt + C
      • Firefox - Shift + Alt + C

  • Значение по умолчанию - Нет.
  • Атрибут не обязательный.
  HREFLANG - Устанавливает язык текстового пользовательского контента используемый в ссылаемом HTML-документе.

  • Значение:


  • Значение по умолчанию - Нет.
  • Атрибут не обязательный.
  REL - Устанавливает тип отношения между файлом с контентом, на который ссылается элемент тега AREA и документом его содержащим.

  • Значение - Список с названиями типов отношений, разделенных пробелами.
      Названия некоторых более поддерживаемых браузерами типов:
    • alternate - Внешний источник данных - альтернативная версия документа, в котором находится эта ссылка.
    • appendix - Внешний источник данных - это приложение, на которое есть ссылка в документе с с этой ссылкой.
    • bookmark - Внешний источник данных - HTML-документ, который является закладкой (содержащим ссылку на ключевую точку) для всей Web-страницы, к которой относится документ с этой ссылкой.
    • chapter - Внешний источник данных - HTML-документ Web-страницы, которой является главой для документа с этой ссылкой.
    • contents - Внешний источник данных - HTML-документ, который является содержанием для всей Web-страницы, к которой относится документ с этой ссылкой.
    • copyright - Внешний источник данных - HTML-документ, в котором содержится информация об авторских правах для документа с этой ссылкой.
    • glossary - Внешний источник данных - HTML-документ, который является глоссарием терминов для документа с этой ссылкой.
    • help - Внешний источник данных - HTML-документ, который является справочным для документа с этой ссылкой.
    • index - Внешний источник данных - HTML-документ, который является корневым для дерева Web-страницы, к которой относится документ с этой ссылкой.
    • next - Внешний источник данных - HTML-документ Web-страницы, которой непосредственно следует за документом с этой ссылкой.
    • nofollow - Внешний источник данных - HTML-документ, который не имеет непосредственного отношения к документу с этой ссылкой. (Этот тип имеет существенное значение для индексации Web-страницы поисковыми системами.)
    • noopener - Запрещает браузеру предоставлять ссылку на интерфейс к окну с этой ссылкой скриптам HTML-документа - внешнего источника данных.
    • preload - Сообщает браузеру, что внешний источник данных должен быть предварительно загружен, для последующего использования.
    • prev - Внешний источник данных - HTML-документ Web-страницы, которой непосредственно предшествует документу с этой ссылкой.
    • section - Внешний источник данных - HTML-документ Web-страницы, которой является разделом для документа с этой ссылкой.
    • start - Внешний источник данных - HTML-документ, который является стартовым для всей Web-страницы, к которой относится документ с этой ссылкой.
    • stylesheet - Внешний источник данных - таблица стилей CSS для документа, в котором находится эта ссылка.
    • subsection - Внешний источник данных - HTML-документ Web-страницы, которой является подразделом для документа с этой ссылкой.
      Можно определить дополнительные типы отношений.

  • Значение по умолчанию - Нет.
  • Атрибут не обязательный.
  TABINDEX - Устанавливает номер этого элемента в общей последовательности элементов гиперссылок (теги A и AREA), элементов интерфейса и элементов сгенерированных объектов в пределах HTML-документа.
  Это означает, что элемент может получить фокус ввода не только мышкой, но и с помощью клавиши Tab клавиатуры.
  Получение фокуса ввода устанавливает элемент в готовность к выполнению своей функции и активирует все связанные с ним дополнительные сервисы.
  Для гиперссылки это означает, что последующее нажатие клавиши Enter активирует ее.
  • Значение:

    • Целое число от – 32 767 до 32 767 - номер в порядке обхода элементов в документе.
        Если указан положительный номер, то он будет определять порядок обхода. То есть сначала фокус ввода получит элемент с номером 1, потом с номером 2 и т. д.
        Если указан номер, равный нулю, то обход будет осуществляться в порядке, в котором элемент определен в HTML-коде HTML-документа.
         Если указан отрицательный номер, то этот элемент вообще исключается из порядка обхода. Добраться до него можно будет только мышкой.

  • Значение по умолчанию - 0.
  • Атрибут не обязательный.
  TARGET - Устанавливает имя окна или фрейма, куда браузер будет загружать контент, с указанного гиперссылкой адреса.

  • Значения:

    • Допустимый символьный код, назначенный именем фрейма.
        Для загрузки контента во фрейм, заданное имя фрейма должно совпадать с именем указанным в атрибуте NAME элемента тега FRAME или тега IFRAME создавшего этот фрейм.
    • _blank - Контент загружается в новое окно браузера.
    • _self - Контент загружается во фрейм, в котором находится "родительский" документ, вместо него. Если фреймов нет, то это значение работает как _parent.
    • _parent - Контент загружается в окно браузера, в котором находится "родительский" документ, вместо всего содержимого этого окна.
    • _top - Отменяет все фреймы и контент загружается в полном окне браузера, если фреймов нет, то это значение работает как _parent.

  • Значение по умолчанию - _parent.
  • Атрибут не обязательный.
  TITLE - Устанавливает поясняющий текст к области ссылки в виде всплывающей подсказки.
  Эта подсказка, например, появится при наведении на область ссылки курсора мышки.
  TYPE - Устанавливает тип файла, на который указывает гиперссылка.

  • Значение:


  • Значение по умолчанию - Нет.
  • Атрибут не обязательный.
  SHAPE - Устанавливает форму области ссылки.

  • Значения:

    • rect – Прямоугольник.
    • circle – Круг.
    • poly - Многоугольник.

  • Значение по умолчанию - Нет.
  • Атрибут обязательный.
  COORDS - Устанавливает координаты области ссылки в поле элемента тега IMG.

  • Значения:

    COORDS="X1, Y1, X2, Y2" - для прямоугольника:

    COORDS="X, Y, R" - для круга:

    COORDS="X1, Y1, X2, Y2, X3, Y3[,...][, Xn,Yn" - для многоугольника:


  • Значение по умолчанию - Нет.
  • Атрибут обязательный.

Пример создания карты изображения:
<IMG SRC="../content/pume.jpg" USEMAP="#topmanager" ALT="Русские матрешки">
<P>
  <MAP NAME="topmanager">
    <AREA SHAPE="rect" COORDS="195,31,243,97" HREF="../content/putin.htm" TARGET="_self">" TITLE="Путин">
    <AREA SHAPE="rect" COORDS="119,106,265,220" HREF="../content/medvedev.htm" TARGET="_self" TITLE="Медведев">
    <AREA SHAPE="rect" COORDS="0,219,334,471" HREF="../content/putin.htm" TARGET="_self" TITLE="Путин">
  </MAP>
</P>
Здесь создаются три прямоугольные области ссылки, ссылающиеся на HTML-документы putin.htm, medvedev.htm и putin.htm. Реультат: