Javascript 图像多个区域上的滚动效果

我正在尝试对图像的特定部分进行翻转效果。因此，根据图像上方悬停的区域，图像将更改为不同的图像。我还希望这些部分的图像是可点击的。我不认为我可以简单地映射我想要进行滚动和链接的区域，因为我希望图像/可单击区域根据浏览器的大小动态调整大小

这就是我到目前为止所做的：

该图像位于以下CSS下：

#banner {
    width: 100%;
    margin-top: 0px;
    margin-bottom: auto;
    margin-left: 0px;
    margin-right: auto;
    position: relative
 }

我用CSS制作了一个可点击的框：

a.box1{
    display: block;
    position: absolute;
    top: 17%;
    left: 16%;
    width: 15.5%;
    height: 9%;
}

---

你们有关于如何实现这一点的Javascript技巧吗。我正在考虑这样做，但我需要指定一个图像。有没有一种方法可以创建一个动态大小的空图像框，比如box1（上面的CSS），因为只有当你将鼠标悬停在图像的某个点上时，滚动效果才会消失。

你可以简单地使用图像精灵来实现这一点，这与原始视频游戏中使用的想法相同。最好的部分是，您只需要使用一个图像，这意味着页面将漂亮地加载，并且只需要一些数学css——无需javascript。它适用于所有新旧浏览器。这篇文章从一个列表中解释了整个过程：

尝试图像映射：请避免使用W3；阅读此文：@DevlshOne通过提供坐标，当我更改浏览器的大小时，它是否也会随着我的图像动态调整大小？@ANeves哦，哇，我不知道他们的名声这么差。@jennC我没有找到一种用百分比映射的方法，尝试组装拼图可能会变得困难。看看这篇文章对你有什么帮助：，还是这篇：