Question

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

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

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

Answer 1

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

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

Answer 2

您需要将坐标（x，y）转换为百分比。

E.g。如果您的图像宽度为200px，高度为200px，并且您的坐标为x = 50px，y = 100px，那么在转换后您将获得

x = 50/200*100 = 25%
y = 100/200*100 = 50%

所以现在你知道你的坐标总是从屏幕左边25％到顶部50％，假设图像占整个屏幕。这是你问的吗？：）

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

2 个答案: