创建可扩展的响应热点

Question

我在这里继续这个教程/问题

How to hotspot a resizable image?

我正在尝试为移动设备调整热点大小。

这是我的CSS代码

<style>
.hotspotted {
position: relative;
}

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

#hotspot1 {
height: 81%;
left: 9%;
top: 16%;
width: 45%;
}

#hotspot2{
height: 15%; 
left: 16%;
top: -5%;
width: 11%;
background-color:#0F6
}

img {max-width:100%}

body {
background-color: #069;
}

这是我的HTML

<div class="hotspotted">
<img src="sv-map.png" border="0"/>
<a href="#" id="hotspot1" class="hotspot"></a>
<a href="www.google.co.nz" id="hotspot2" class="hotspot"></a>
</div>

现在我试图在下面的地图上创建或使用这些热点

但在事情的反应方面没有运气。

我在另一个链接中注意到My Head Hurts回答你需要使用坐标。我不知道从哪里开始，并希望有人可以帮助我这个

由于