图像上的可点击标记点

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>