如何hotspot一个可调整大小的图像？ [英] How to hotspot a resizable image?

问题描述

我想将hotspot指向显示在html网页上的图片中的区域。
但是此图片会根据显示屏幕更改宽度和高度：

I would like to hotspot to areas in an image displayed on an html page. However this image changes width and height based on the display screen:

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

我如何热点呢？

推荐答案

您可以将原始坐标映射到缩放图像的原始坐标。在相对定位的元素中的图像和热点，然后使用百分比绝对地定位热点：

You could place the image and hotspots in a relatively positioned element and then position the hotspots absolutely using percentages:

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>

更新

如果你打算使用地图，我建议你计算新的坐标，而不是使用百分比。这可以很容易地使用以下公式完成：

If you are going to use a map then I suggest you calculate new co-ordinates rather than use percentages. This can be quite easily done using the following equation:

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

这篇关于如何hotspot一个可调整大小的图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！