如何将按钮放在图像的坐标上，并在点击这些按钮时运行jquery函数

Question

我有一个局部视图，在该视图中我以png格式显示图像。对于图像我有一组点与他们的坐标x1，y1。我需要在图像上放置某种按钮（例如，width = 18和height = 23），并根据它们的坐标定位它们。当用户点击一个按钮时，我想让alert（）函数运行。我该怎么做？当用户调整窗口大小时，图像也会调整大小，所以坐标应重新计算以显示在正确的位置。

Answer 1

我想你要找的是<map>标记，具体叫做image-map。

例：

<img src="https://ctd.ucsd.edu/wp-content/uploads/2012/11/ABCD_VotingCard.png" usemap="#map"/> 
    <map name="map"> 
    <area shape="rect" coords="8,8,132,100" title="A" onclick="alert('A')"> 
    <area shape="rect" coords="158,8,282,100" title="B" onclick="alert('B')"> 
    <area shape="rect" coords="8,124,132,216" title="C" onclick="alert('C')"> 
    <area shape="rect" coords="158,124,282,216" title="D" onclick="alert('D')"> 
    </map> 

这里有一个demonstration。