CSS

Question

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

这是当图像处于原始尺寸（宽度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>

Answer 1

这个答案应该是你要找的：https://stackoverflow.com/a/11411956/1825150

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

查看答案，My Head Hurts也提供了一个详细的例子。希望这会有所帮助。

编辑：根据Vality和Ghost的评论，这里是链接答案提供的内容的引用（在编辑时）：

重要说明：链接答案的内容来自上述海报。

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的更新

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

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

在可伸缩图像上定位热点

1 个答案:

CSS

HTML

OP的更新