САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

HTML5 Учебник

HTML ГлавнаяHTML ВведениеHTML РедакторыHTML ОсновыHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML ЦветаHTML c CSSHTML СсылкиHTML ИзображенияHTML ТаблицыHTML СпискиHTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML JavaScriptHTML Путь к ФайлуHTML ГлаваHTML МакетHTML АдаптивныйHTML Компьютерный кодHTML ОбъектыHTML СимволыHTML КодировкаHTML URL КодированиеHTML XHTML

HTML Формы

HTML ФормыHTML Элементы формыHTML Тип вводаHTML Атрибуты ввода

HTML5

HTML5 ВведениеHTML5 ПоддержкаHTML5 Новые ЭлементыHTML5 СемантикаHTML5 МиграцияHTML5 Синтасис

HTML Графика

HTML CanvasHTML SVGHTML Google Карта

HTML Медиа

HTML МедиаHTML ВидеоHTML АудиоHTML ОбъектыHTML YouTube

HTML API

HTML ГеолокацияHTML ПеретаскиваниеHTML Веб ХранилищеHTML Веб РаботникHTML СОС

HTML Примеры

HTML ПримерыHTML ВикторинаHTML УпражненияHTML СертификатHTML ЗаключениеHTML Возможности

HTML Справочники

HTML Список ТеговHTML АтрибутыHTML ГлобальныеHTML СобытияHTML ЦветаHTML ХолстHTML Аудио/ВидеоHTML ДекларацииHTML Набор КодировокHTML URL КодHTML Коды языкаHTML Коды странHTTP СообщенияHTTP МетодыКовертер PX в EMКлавишные комбинации

HTML Изображения карта



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


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

Тег <map> определяет изображение-карту. Изображение-карта - это изображение с кликабельными областями.

Нажмите на компьютер, телефон или чашку кофе на изображении ниже:

Рабочее место Солнце Меркурий Венера

Пример

<img src="workplace.jpg" alt="Рабочее место" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Компьютер" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Телефон" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Кофе" href="coffee.htm">
</map>
Редактор кода »

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

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

Для создания карты изображений вам понадобится изображение и карта, содержащая некоторые правила, описывающие кликабельные области.


Изображение

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

<img src="workplace.jpg" alt="Рабочее место" usemap="#workmap">

Значение usemap начинается с хэштега # затем следует имя карты изображений, и используется для создания связи между изображением и картой изображений.

Примечание: Вы можете использовать любое изображение в качестве карты изображений.


Карта

Затем добавить элемент <map>.

Элемент <map> используется для создания карты изображений и связан с изображением с помощью атрибута name:

<map name="workmap">

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

Примечание: Вы можете вставить элемент <map> в любом месте, где вам нравится, он не должен быть вставлен сразу после изображения.


Область

Затем добавьте кликабельные области.

Кликабельная область определяется с помощью элемента <area>.

Форма

Вы должны определить форму области, и вы можете выбрать одно из этих значений:

  • rect - определяет прямоугольную область
  • circle - определяет круговую область
  • poly - определяет полигональную область
  • default - определяет всю область

Координаты

Вы должны определить некоторые координаты, чтобы иметь возможность разместить кликабельную область на изображении.

Координаты приходят в парах, один для оси X и для оси Y.

Координата 34, 44 находится на расстоянии 34 пикселей от левого края и 44 пикселей от верхнего:

Рабочее место

Координата 270, 350 находится на расстоянии 270 пикселей от левого края и 350 пикселей от верхнего:

Рабочее место

Теперь у вас достаточно данных для создания кликабельной прямоугольной области:

<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
Редактор кода »

Это область, которая становится кликабельной и отправляет пользователя на страницу computer.htm:

Рабочее место

Круг

Чтобы добавить область круга, сначала найдите координаты центра круга:

337, 300

Рабочее место

Затем укажите радиус окружности:

44 пикселей

Рабочее место

Теперь у вас есть достаточно данных для создания интерактивной круговой области:

<area shape="circle" coords="337, 300, 44" href="coffee.htm">
Редактор кода »

Это область, которая становится кликабельной и отправляет пользователя на страницу coffee.htm:

Рабочее место

Изображение карта с JavaScript

Кликабельная область не обязательно должна быть ссылкой на другую страницу, она также может вызвать функцию JavaScript.

Добавить событие click элемент <area> для выполнения функции JavaScript:

Пример

Вы можете использовать атрибут onclick для выполнения функции JavaScript при щелчке области.

<area shape="circle" coords="337,300,44" onclick="myFunction()">
Редактор кода »