Html area map: : The Image Map element — HTML: HyperText Markup Language

Leave a Comment / Html / By /

| HTML | WebReference

Главная Справочник HTML <map>

  • Содержание
    • Синтаксис
    • Закрывающий тег
    • Атрибуты
    • Пример
    • Спецификация
    • Браузеры

Элемент <map> (от англ. map — карта) служит контейнером для элементов <area>, которые определяют активные области для карт-изображений. Такие области устанавливают невидимые зоны на изображении, являющиеся ссылками на HTML-документы. Цель использования <map> — в связывании элемента <img> с клиентской картой-изображением. Эта связь определяется применением единого идентификатора как в <img>, задаваемого атрибутом usemap, так и в <map>, устанавливаемого атрибутом name.

Синтаксис

<map name="<имя>">
  <area>
</map>

Закрывающий тег

Обязателен.

Атрибуты

name
Имя карты-изображения.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>MAP</title> <style> #title { line-height: 0; /* Изменяем межстрочное расстояние */ } #title img { border: none; /* Убираем рамку вокруг изображения */ } </style> </head> <body> <div><img src=»image/ecctitle.png» alt=»Детский образовательный центр»><br> <img src=»image/navigate.png» alt=»Навигация по сайту» usemap=»#Navigation»></div> <p><map name=»Navigation»> <area shape=»poly» coords=»113,24,211,24,233,0,137,0″ href=»page/inform.html» alt=»Информация»> <area shape=»poly» coords=»210,24,233,0,329,0,307,24″ href=»page/activity.html» alt=»Мероприятия»> <area shape=»poly» coords=»304,24,385,24,407,0,329,0″ href=»page/depart.html» alt=»Отделения»> <area shape=»poly» coords=»384,24,449,24,473,0,406,0″ href=»page/techinfo.

html» alt=»Техническая информация»> <area shape=»poly» coords=»449,24,501,24,525,0,473,0″ href=»page/study.html» alt=»Обучение»> <area shape=»poly» coords=»501,24,560,24,583,0,525,0″ href=»page/work.html» alt=»Работа»> <area shape=»poly» coords=»560,24,615,24,639,0,585,0″ href=»page/misk.html» alt=»Разное»> </map></p> </body> </html>

Спецификация

СпецификацияСтатус
WHATWG HTML Living StandardЖивой стандарт
HTML5Возможная рекомендация
HTML 4.01 SpecificationРекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры

1121111
1161

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

Изображения

См. также

  • <area>
  • Карты-изображения

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

Карты изображений

в HTML с примерами

Вернуться к: Учебники по HTML

В этой статье я собираюсь обсудить карты изображений в HTML с примерами. Пожалуйста, прочитайте нашу предыдущую статью, в которой мы обсуждали элемент изображения в HTML с примерами. В конце этой статьи вы узнаете все о HTML-картах изображений с примерами.

HTML-карты изображений

Мы можем использовать HTML-карты изображений, чтобы создавать интерактивные области на изображениях. Карта изображения состоит из изображения с активными областями, где вы можете щелкнуть изображение, и оно откроется в новом или уже указанном месте.

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

Карта изображения в HTML

Тег HTML определяет карту изображения. Карта изображений — это просто изображение с несколькими кликабельными областями. Кликабельные области помечаются одним или несколькими тегами в зависимости от требований.

Идея карты изображения заключается в том, что вы должны иметь возможность выполнять различные действия в зависимости от того, где вы нажимаете на изображение. Чтобы создать карту изображения, вам понадобится изображение и некоторый HTML-код, указывающий кликабельные места.

Как это работает?

Идея карты изображений заключается в том, что вы должны иметь возможность выполнять различные действия в зависимости от того, где на изображении вы щелкаете. Чтобы создать карту изображения, вам нужно изображение и некоторый HTML-код, описывающий кликабельные области.

Изображение

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

Рабочий стол

Атрибут name должен иметь то же значение, что и атрибут usemap изображений, тогда только он будет работать.

Области

После создания элемента карты нам нужно создать кликабельные области. Щелчковая область помечается с помощью элемента.

”Keyboard”

Область может быть прямоугольник, круг, многоугольник или целая область; мы можем выбрать любой из них в зависимости от наших требований. Внутри элемента области мы должны определить форму, которую мы используем, а также координаты области, которую мы хотим сделать кликабельной.

Пример карт изображений HTML 
 

<тело>

 
Карты изображений
 

 jpg" alt="Рабочий стол" usemap="#deskmap">

<имя карты="deskmap">

  Keyboard
  
  Mouse
  
  Дневник

Когда вы запустите приведенный выше HTML-код, вы получите следующий вывод в браузере.

Запустите приведенный выше код в редакторе кода и попробуйте использовать клавиатуру, мышь и дневник. Он будет перенаправлять вас на разные веб-страницы в зависимости от того, какой объект вы нажали.

Здесь, в этой статье, я пытаюсь объяснить Карты изображений в HTML с примерами, и я надеюсь, вам понравится эта статья Карты изображений HTML с примерами.

imagemap

Элемент imagemap поддерживает базовую функциональность HTML-изображения «на стороне клиента». разметка карты. Imagemap позволяет указать связываемую область или регион над изображение, позволяющее по ссылке в этом регионе отображать другую тему.

HTML-карта изображения на стороне клиента связывает изображение с навигацией структура («карта») с помощью ассоциации ID с карты к изображению. Напротив, версия разметки карты изображений DITA просто включает целевое изображение в качестве первого обязательного элемента в разметке, за которым следует последовательность элементов области, представляющих связи, связанные с содержащимся изображение.

Структура карты изображений может быть выведена либо в стандартный HTML-карта изображений или альтернативные формы навигации (например, на основе таблиц). карты изображений). При выводе в формате PDF минимальной формой будет представление в минимум изображения; передовые процессоры вывода PDF должны обеспечивать эквивалентные региональные гиперссылки.

Содержимое внешней ссылки содержит предполагаемый альтернативный текст или текст при наведении для области карты.

Содержит

( (изображение) затем (область) (один или больше) )

Содержится
body, section, example, p, note, lq, li, itemgroup, dd, stentry, draft-comment, fn, entry, conbody, prereq, context, info, tutorialinfo, stepxmp, selection, cuttionhd, chdeschd, Choption, chdesc, stepresult, result, postreq, refsyn, proptypehd, propvaluehd, propdeschd, pd

Наследство
тема/рис, ut-d/imagemap

Атрибуты
Имя Описание Тип данных Значение по умолчанию Требуется?
%display-atts; (масштаб, рамка, размах) Набор связанных атрибутов, описанных в %display-atts; объект параметра ПЭ нет применимо Не применимо
%univ-atts; (% select-atts;, %id-atts;, перевести, xml:lang)
Набор связанных атрибутов, описанных в %univ-atts;		 объект параметра ПЭ нет применимо Не применимо
зрелище Специализированный атрибут title позволяет архитекторам специализированных типы для определения фиксированного заголовка или заголовка по умолчанию для специализированного элемента. Не предназначено для непосредственного использования авторами. CDATA # ПРЕДПОЛАГАЕТСЯ №
%global-atts; (xtrf, xtrc) Набор связанных атрибутов, описанных в %global-atts; объект параметра ПЭ нет применимо Не применимо
класс, выходной класс Общие атрибуты, описанные в разделе Другие общие атрибуты DITA

Пример

Простая карта изображений выглядит так (обратите внимание, что рендеринг будет зависеть от того, как эта разметка поддерживается для определенных выходных форматов):

  <изображение href="imagemapworld.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *