2

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

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

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

4

2 回答 2

4

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

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
于 2012-07-10T11:05:30.587 回答
0

您需要将坐标 (x,y) 转换为百分比。

例如，如果您的图像是 200px 宽和 200px 高，并且您的坐标是 x=50px,y=100px，那么在转换后您会得到

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

所以现在你知道你的坐标总是在屏幕左侧的 25% 和顶部的 50%，假设图像占据整个屏幕。这是你问的吗？:)

于 2012-07-10T11:02:40.087 回答