我一直在绞尽脑汁，我会尝试尽可能具体：
我在我设计的网站上有一个5个湖泊的图像作为元素。我想让每个湖泊都可以点击，这样我就可以利用灯箱弹出每个湖泊的地图。
这是捕获 - 我使用地图标签对其进行排序，但我需要定义绝对高度和宽度以提供区域的坐标;我已经避免定义，以便我的页面在移动设备上正确缩放或者重新调整窗口大小。
实现这一目标的最有效方法是什么？
我附上了湖泊的图像。该网站的网址为：http://pfowp.lowertownish.com/
5 lakes each need to be clickable
如果查看代码有帮助，请点击：
<div id="select" style="font-size:20px; text-align:center; display:block;">
<h2 class="lakesHead">Choose Your Get-A-Way!</h2><hr>
<img class="landscape" src="/img/theLakes.png" />
<a href="/reservations/"><button style="text-shadow:0 0 10px white; padding: 20px 35px; color:#264368; font-weight:900; margin: 25px auto 40px; display:block;" class="btn btn-warning shadowMedium"> BOOK YOUR TRIP NOW </button></a>
<p id="foodList" style="margin-top:20px"><em>Our remote Canadian lakes offer some of the finest Canadian walleye and trophy northern fishing anywhere. The famous Ogoki and Albany River system have many rapids and pools, which result in excellent spawning and reproduction. As a result the fishing is consistent in its high quality...spring, summer or fall. This water system is not only home to trophy fish but numbers of fish caught during your fishing trip to Canada.</em></p>
</div>
任何帮助都会受到赞赏，甚至是正确的方向。谢谢。
答案 0 :(得分：0)
如果您不想使用<map>，这是一种快捷方式。
将图片放置为div background-size:cover;的背景。
如果您将lakes image拆分为9平方div元素，并使用唯一ID绑定每个元素的点击事件，您还可以保留移动设备中所需的宽高比