Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

HTML Учебники


HTML Формы


HTML Графика


HTML Медиа


HTML API Интерфейсы


HTML Примеры


HTML Ссылки



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 Справочник тегов.



×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.