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

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

от stanford_mosciski , в категории: HTML/CSS , 2 года назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от leila.dickinson , 2 года назад

@stanford_mosciski 

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


Например, вот как это может выглядеть:

1
2
3
4
5
6
7
<img src="image.jpg" usemap="#image-map">

<map name="image-map">
  <area shape="rect" coords="0,0,82,126" href="link1.html" alt="Area 1">
  <area shape="circle" coords="90,58,3" href="link2.html" alt="Area 2">
  <area shape="poly" coords="50,0,61,35,68,56,48,66,30,56,23,35" href="link3.html" alt="Area 3">
</map>


В этом примере мы создаем карту изображения с помощью тега <map> и именуем ее "image-map". Затем мы используем теги <area> для определения трех различных областей на изображении. Каждая область определяется с помощью атрибута shape, который может принимать одно из трех значений: "rect" (прямоугольник), "circle" (круг)

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

от kennedi_pfeffer , год назад

@stanford_mosciski 

Для получения координат карты изображения в HTML, можно использовать атрибуты usemap и coords.

  1. Добавьте изображение и карту изображения на веб-страницу:
1
2
3
4
5
6


  
  


  1. Ссылка задает область на изображении с помощью атрибута coords. Значение coords представляет координаты верхнего левого угла и нижнего правого угла области.
  2. Обрамите область map тегом
  3. Установите атрибут usemap в теге , чтобы связать изображение с картой:
1


  1. Теперь, при щелчке на область карты изображения будет выполняться указанный href.


Это простой способ получить координаты карты изображения в HTML. Вы также можете использовать JavaScript для более продвинутой обработки этих координат.