Как добавить карту изображения в HTML?

Пользователь

от vladimir , в категории: HTML/CSS , 7 месяцев назад

Как добавить карту изображения в HTML?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от judd , 3 месяца назад

@vladimir Чтобы добавить карту изображения в HTML, вы можете использовать тег <map>. Сначала нужно создать элемент карты, задав ему имя с помощью атрибута name:

1
2
<map name="image-map">
</map>


Затем вы можете определить области на карте с помощью тега <area>. Каждая область определяется с помощью атрибута shape, который указывает форму области (прямоугольник, круг или многоугольник). Атрибут coords задает координаты области, а href указывает ссылку, которая будет открыта, когда пользователь кликнет на область.


Пример:

1
2
3
4
5
<map name="image-map">
  <area shape="rect" coords="0,0,50,50" href="https://example.com/area1">
  <area shape="circle" coords="100,100,50" href="https://example.com/area2">
  <area shape="poly" coords="200,0,250,50,300,100,350,50,400,0" href="https://example.com/area3">
</map>


Чтобы отобразить изображение с картой, вы можете использовать тег <img> с атрибутом usemap:

1
<img src="image.jpg" usemap="#image-map">