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

HTML Учебник

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

HTML Формы

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

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

HTML Медиа формат HTML Video HTML Audio HTML Плагины HTML YouTube

HTML API

HTML Геолакация HTML Перетаскивание HTML Веб хранилище HTML Веб работник HTML SSE

HTML Примеры

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

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

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

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



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

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

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

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

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

Пример

Вот исходный код HTML для приведенной выше карты изображений:

<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 - определяет всю область

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

Shape="rect"

Координаты для shape= "rect" приходят парами, один для оси x и один для оси Y.

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

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

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

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

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

<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
Попробуйте сами »

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

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

Shape="circle"

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

337, 300

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

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

44 пикселей

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

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

<area shape="circle" coords="337, 300, 44" href="coffee.htm">
Попробуйте сами »

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

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

Shape="poly"

shape="poly" содержит несколько координатных точек, которые создают фигуру, образованную прямыми линиями (многоугольник).

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

Например, в форме круассана!

Как мы можем сделать круассан на изображении ниже кликабельной ссылкой?

Французская кухня

Мы должны найти координаты x и y для всех краев круассана:

Французская кухня

Координаты делятся на пары: одна для оси x, другая для оси y:

Пример

<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">
Попробуйте сами »

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

Французская кухня

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

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

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

Пример

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

<area shape="circle" coords="337,300,44" onclick="myFunction()">
Попробуйте сами »

Краткое содержание

  • Используйте HTML элемент <map> для определения карты изображений
  • Используйте HTML элемент <area> для определения кликабельных областей на карте изображений
  • Используйте HTML атрибут usemap самого элемента <img> для указания на карту изображений

HTML Теги изображений

Тег Описание
<img> Определяет изображение
<map> Определяет изображение-карта
<area> Определяет активную область внутри изображении-карты
<picture> Определяет контейнер для нескольких ресурсов изображений

Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.