html - 如何为可调整大小的图像热点？

我想热点到一个显示在html页面上的图像区域。
但是，此图像会根据显示屏更改宽度和高度：

<img height="100%" width="100%" src="img.png"/>

我该怎么热点呢？
我在想一个函数，将原始坐标映射到调整大小的图像的坐标。

最佳答案

您可以将图像和热点放在相对位置的元素中，然后绝对使用百分比来定位热点：
CSS

.hotspotted {
    position: relative;
}

.hotspot {
    display: block;
    position: absolute;
}

#hotspot1 {
   height: 81%;
   left: 9%;
   top: 16%;
   width: 45%;
}

#hotspot2{
    height: 18%;
    right: 11%;
    top: 20%;
    width: 11%;
}

HTML格式

<div class="hotspotted">
    <img height="100%" width="100%" src="img.png"/>
    <a href="#" id="hotspot1" class="hotspot"></a>
    <a href="#" id="hotspot2" class="hotspot"></a>
</div>

更新
如果你要使用地图，我建议你计算新的坐标，而不是使用百分比。使用以下公式可以很容易地实现这一点：

new_x = (orginal_x / original_image_width) * new_image_width
new_y = (orignal_y / original_image_height) * new_image_height