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

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 vs. XHTML

HTML Формы

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

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

HTML Media HTML Video HTML Audio HTML Plug-ins HTML YouTube

HTML APIs

HTML Геолакация HTML Drag/Drop 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> определяет изображение-карту. Изображение-карта - это изображение с кликабельными областями.

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

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

Пример

<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()">
Редактор кода »