如果我将图像分配给一个确定的宽度和高度，我有一个可以正常工作的热点图像。如果我使用width = 100％来使图像可缩放，那么当我的热点“左”/“宽”定位保持准确时，“顶部”/“高度”位置在整个位置移动。我知道我需要通过基于当前屏幕宽度的度量来设置我的顶部/高度位置，我只是没有如何编码的知识/语言。在可缩放的图像上放置热点

这是在图像处于原始尺寸（宽度1580，高度1050）时起作用的编码，所以如果我可以将我的顶部编码为顶部= 93％*（1050/1580）* new_screen_width但是！

我该怎么做？

这里是我的代码：

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Sample Photo</title> 
<style media="screen" type="text/css"> 

.hotspotted { 
    position: relative; 
} 

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

#hotspot1 { 
    height: 8%; 
    left: 87%; 
    top: 85%; 
    width: 13%; 
} 

#hotspot2 { 
    height: 7%; 
    left: 92%; 
    top: 93%; 
    width: 4%; 
} 

#hotspot3 { 
    height: 7%; 
    left: 96%; 
    top: 93%; 
    width: 4%; 
} 



</style> 
</head> 

<body> 

<div class="hot spotted"> 
<img src="images/homepage D.jpg" width="100%" /> 
<a href="DMD A.html" id="hotspot1" class="hotspot"></a> 
<a href="DMD C.html" id="hotspot2" class="hotspot"></a> 
<a href="index.html" id="hotspot3" class="hotspot"></a> 
</div> 

</body> 
</html>

来源

2014-04-07 user3506460

看起来像有在CSS中的错误 - 不.hotspotted，但.hot.spotted。 –

这个答案应该是你在找什么：https://stackoverflow.com/a/11411956/1825150

你可以放置在一个相对定位元素的图像和热点，然后定位热点绝对使用百分比...

检查出答案，My Head Hurts给出了一个详细的例子以及。希望这可以帮助。

编辑：按照从Vality和鬼的意见，这里有什么联系的答案提供报价（在此编辑的时间）：

重要提示：链接的答案的内容来自提到的海报以上。

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>

OP的UPDATE

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

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

来源

2014-08-27 23:25:25 Savaii

请尝试将链接中的一些答案复制到答案中，否则如果链接失效，则没有人会知道您的解决方案。尽管如此，欢迎来到SO并在其他方面做得很好。 – Vality

在可缩放的图像上放置热点

回答

CSS

HTML

OP的UPDATE

相关问题