在不使用<地图>

我一直在为以下问题绞尽脑汁，我会尽可能具体：

我在我设计的一个网站上有一张5个湖泊的图片作为元素。我想让每个湖泊都可以点击，这样我就可以利用灯箱弹出每个湖泊的地图。

问题是——我会使用地图标签来解决这个问题，但我需要定义绝对高度和宽度来提供区域的坐标；我避免定义它，以便我的页面在移动设备上或重新调整窗口大小时能够正确缩放。

实现这一点最有效的方法是什么？

我附上了一张湖泊的图片。该网站的url为：http://pfowp.lowertownish.com/

5个湖泊每个都需要可点击

如果它有助于查看代码，这里是：

<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>

任何帮助都将不胜感激，甚至是指向正确方向的一点。非常感谢。