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

我想热点到HTML页面上显示的图像中的区域。如何热点可调整大小的图像？

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

我怎么热点是：但是根据显示屏上这一形象改变的宽度和高度？我正在考虑将原始坐标映射到已调整大小的图像的功能。

来源

2012-07-10 simpatico

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

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-10 11:05:30

你能提供一个完整的例子，用元素吗？ – simpatico 2012-07-11 11:25:27

@simpatico如果你正在使用地图，那么不要使用百分比 - 据我所知，他们没有得到很好的支持。你只需要根据你对图像的了解计算出新的坐标。我已经更新了我的答案。 – 2012-07-11 12:37:52

如果不使用地图，我如何让热点工作？在你的html代码中没有链接。你把它们放在哪里？ – simpatico 2012-07-11 13:12:01

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

E.g.如果图像是200像素宽200像素高，你的坐标为x = 50像素，Y = 100像素，然后转换后你

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

所以，现在你知道你的坐标总是25％，从屏幕左边和假设图像需要整个屏幕，则从顶部算起50％。这是你问的吗？ :)

来源

2012-07-10 11:02:40 algiecas

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

回答

相关问题