图像上的可点击标记点 [英] Clickable Marked points on an Image

问题描述

首先查看图像，以更好地了解我想做什么.图片上的红点将是可单击的.当您单击它们时，将弹出描述.

first check out the image for a better understanding of what I want to do. The red points on the picture will be clickable. When you click on them a description will pop up.

我看到了HTML < area> 标签和带有图像坐标的JS函数的使用.

I saw the use of HTML <area> tag and a JS function with image coordinates.

为此有可用的现成库吗?

Is there any ready made library available for this ?

推荐答案

最好使用< img> 和

You're best off making use of an <img> and the <map> element. From here you can set <area> children with a circular shape, and specify the the co-ordinates. These are in the format x,y from the top-left pixel. With a circle, the third value is the diameter. You can link these off, or attach an event handler to display a popup:

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>

这篇关于图像上的可点击标记点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！