Карты изображений (map, area)

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 24
Автор
Рек. время прохождения 2 минуты
Упражнений 9
Комментарии 0
Тренажер HTML
В этом наборе упражнений мы изучим карты изображений в HTML. Карты изображений позволяют сделать отдельные области одной картинки кликабельными, превращая их в независимые ссылки. Это полезно для создания интерактивных схем, карт или диаграмм. Вы научитесь связывать изображение с картой с помощью атрибута `usemap`, определять саму карту тегом `<map>` и создавать кликабельные зоны разной формы (прямоугольник, круг, многоугольник) с помощью тега `<area>`. Задания построены от простого к сложному: от базовой структуры до создания комплексных карт с несколькими областями.
Список тем

Создание основы для карты изображений

id: 37815_html-imagemap-01

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

CSS
img {
  max-width: 100%;
  height: auto;
}
HTML
<img src="https://naytikurs.ru/img/8.png" width="360" height="200" alt="Солнечная система" input1="input2solarsystem">

<input3 name="solarsystem">
</input4>
Изображению <img> добавьте атрибут `usemap`. Его значение должно начинаться с символа `#`, за которым следует имя карты. Затем создайте парный тег `<map>`, который будет содержать кликабельные области.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Именование карты

id: 37815_html-imagemap-02

Карта и изображение связываются по имени. Укажите имя для тега `<map>` с помощью атрибута `name`. Это имя должно точно совпадать с тем, что указано в атрибуте `usemap` у изображения (но уже без символа `#`).

CSS
img {
  max-width: 100%;
  height: auto;
}
HTML
<img src="https://naytikurs.ru/img/8.png" width="360" height="200" alt="Солнечная система" usemap="#solarsystem">

<map input1="input2">
  <!-- Здесь будут области -->
</map>
Внутри тега `<map>` добавьте атрибут `name`. Его значение должно быть таким же, как в `usemap` у `<img>`, но без `#`. В данном случае это 'solarsystem'.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Добавление прямоугольной области

id: 37815_html-imagemap-03

Теперь давайте добавим первую кликабельную область. Внутри тега `<map>` создайте тег для области и с помощью атрибута `shape` задайте ей прямоугольную форму.

CSS
img {
  max-width: 100%;
  height: auto;
}
HTML
<img src="https://naytikurs.ru/img/8.png" width="360" height="200" alt="Солнечная система" usemap="#solarsystem">

<map name="solarsystem">
  <input1 input2="input3" coords="25,30,110,170" href="#sun">
</map>
Внутри `<map>` используется одиночный тег `<area>`. Чтобы задать форму, добавьте к нему атрибут `shape` со значением `rect`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Прямоугольная область: координаты и ссылка

id: 37815_html-imagemap-04

Чтобы прямоугольная область работала, ей нужны координаты и ссылка. Добавьте атрибуты `coords` (координаты левого верхнего и правого нижнего углов) и `href` (адрес ссылки).

CSS
img {
  max-width: 100%;
  height: auto;
}
HTML
<img src="https://naytikurs.ru/img/8.png" width="360" height="200" alt="Солнечная система" usemap="#solarsystem">

<map name="solarsystem">
  <area shape="rect" input1="25,30,110,170" input2="#sun" alt="Солнце">
</map>
Добавьте атрибут `coords` со значением '25,30,110,170' (X1,Y1,X2,Y2). Затем добавьте атрибут `href` для указания URL, на который будет вести клик.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Создание круглой области

id: 37815_html-imagemap-05

Теперь создадим кликабельную область для одного из круглых объектов на изображении. Используйте тег `<area>` и задайте ему форму круга, а также укажите необходимые координаты: центр круга (X, Y) и его радиус (R).

CSS
img {
  max-width: 100%;
  height: auto;
}
HTML
<img src="https://naytikurs.ru/img/8.png" width="360" height="200" alt="Солнечная система" usemap="#solarsystem">

<map name="solarsystem">
  <input1 input2="input3" input4="150,100,25" href="#earth" alt="Земля">
</map>
Создайте тег `<area>`. Атрибуту `shape` присвойте значение `circle`. Атрибуту `coords` передайте три значения через запятую: координата X центра, координата Y центра и радиус. Например: '150,100,25'.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Сложная форма: многоугольник

id: 37815_html-imagemap-06

Для объектов неправильной формы используется многоугольник. Создайте область, задав ей форму `poly` и указав в атрибуте `coords` координаты каждой вершины (X1,Y1,X2,Y2,...).

CSS
img {
  max-width: 100%;
  height: auto;
}
HTML
<img src="https://naytikurs.ru/img/8.png" width="360" height="200" alt="Солнечная система" usemap="#solarsystem">

<map name="solarsystem">
  <area shape="input1" coords="250,50,280,30,310,50,310,150,280,170,250,150" input2="#saturn" alt="Сатурн">
</map>
Атрибуту `shape` присвойте значение `poly`. В атрибут `coords` передайте пары координат X,Y для каждой вершины многоугольника.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Доступность: атрибут alt

id: 37815_html-imagemap-07

Карты изображений должны быть доступны для всех пользователей, включая тех, кто использует скринридеры. Для этого каждая область `<area>` должна иметь атрибут `alt` с описанием ссылки. Добавьте его к обеим областям.

CSS
img {
  max-width: 100%;
  height: auto;
}
HTML
<img src="https://naytikurs.ru/img/8.png" width="360" height="200" alt="Солнечная система" usemap="#solarsystem">

<map name="solarsystem">
  <area shape="rect" coords="25,30,110,170" href="#sun" input1="Солнце">
  <area shape="circle" coords="150,100,25" href="#earth" input2="Земля">
</map>
Каждому тегу `<area>` добавьте атрибут `alt` и присвойте ему текстовое значение, описывающее, куда ведет ссылка. Например: `alt="Перейти к описанию Солнца"`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Открытие ссылки в новой вкладке

id: 37815_html-imagemap-08

Иногда требуется, чтобы ссылка из кликабельной области открывалась в новой вкладке браузера. Для этого используется атрибут `target`. Добавьте его к области и задайте нужное значение.

CSS
img {
  max-width: 100%;
  height: auto;
}
HTML
<img src="https://naytikurs.ru/img/8.png" width="360" height="200" alt="Солнечная система" usemap="#solarsystem">

<map name="solarsystem">
  <area shape="circle" coords="150,100,25" href="#earth" alt="Земля" input1="input2">
</map>
Добавьте тегу `<area>` атрибут `target`. Чтобы ссылка открылась в новой вкладке, присвойте ему значение `_blank`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Комплексная карта с разными формами

id: 37815_html-imagemap-09

Соберем все знания вместе. Перед вами карта с тремя областями, но у них не указана форма. Задайте правильное значение атрибута `shape` для каждой области, ориентируясь на их координаты и названия: прямоугольник, круг и многоугольник.

CSS
img {
  max-width: 100%;
  height: auto;
}
HTML
<img src="https://naytikurs.ru/img/8.png" width="360" height="200" alt="Солнечная система" usemap="#solarsystem">

<map name="solarsystem">
  <area shape="input1" coords="25,30,110,170" href="#sun" alt="Солнце">
  <area shape="input2" coords="150,100,25" href="#earth" alt="Земля">
  <area shape="input3" coords="250,50,310,50,310,150,250,150" href="#jupiter" alt="Юпитер">
</map>
Первая область с четырьмя координатами — это прямоугольник (`rect`). Вторая с тремя координатами (центр X, Y и радиус) — это круг (`circle`). Третья с множеством пар координат — это многоугольник (`poly`).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру