javascript - 在不使用 的情况下在 png 湖泊上创建可点击区域

Question

我一直在为以下问题绞尽脑汁，我会尽量具体化:

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

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

实现此目标的最有效方法是什么？

我附上了一张湖泊的图片。该网站的网址是: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>

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

Answer 1

如果您不想使用 <map>，这是一个快速的方法.

将图像作为背景 div有background-size:cover; .

如果拆分 lakes image在9平方div元素并使用唯一 ID 在每个元素上绑定(bind)点击事件您还可以在移动设备中保留您想要的纵横比

• 湖 1 在左上角
• 湖 2 位于顶部中心
• 3 号湖在右上角
• 4号湖在左中
• 中间没有湖
• 5号湖在右中
• 6 号湖在左下角
• 湖 6 位于底部中心5号湖在右下角