Кликабельные отмеченные точки на изображении

Question

Сначала проверьте изображение для лучшего понимания того, что я хочу сделать.Красные точки на картинке будут кликабельными.Когда вы нажмете на них, появится описание.

Я видел использование тега HTML <area> и функции JS с координатами изображения.

Есть ли для этого какая-либо готовая библиотека?

Answer 1

Лучше всего использовать <img> и элемент <map>.Отсюда вы можете установить <area> детей с кружком shape и указать координаты.Они в формате x,y от верхнего левого пикселя.С кружком третьим значением является диаметр.Вы можете связать их или прикрепить обработчик событий для отображения всплывающего окна:

img {
  height: 100%;
}

area {
  fill: blue;
}

<img src="https://i.stack.imgur.com/q9ZX6.png" usemap="#housemap">

<map name="housemap">
  <area shape="circle" coords="0,0,82,126" href="1.htm" alt="1">
  <area shape="circle" coords="190,58,30" href="2.htm" alt="2">
  <area shape="circle" coords="90,58,30" href="3.htm" alt="3">
  <area shape="circle" coords="90,58,30" href="4.htm" alt="4">
</map>