Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
Вход
Реклама Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

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 Фреймы 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 Графика

HTML Холст HTML SVG

HTML Медиа

HTML Медиа HTML5 Видео HTML5 Аудио HTML Плагины HTML YouTube

HTML APIы

HTML5 Геолокация HTML5 Перетаскивание HTML5 Веб хранилище HTML5 Веб работник HTML5 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 Справочник тегов.