对图像多个区域的翻转效果

Question

我正在尝试对图像的特定部分进行翻转效果。 因此，根据将鼠标悬停在哪个区域上，图像将更改为其他图像。 我也希望图像的那些部分是可单击的。 我认为我不能简单地映射要进行翻转和链接的区域，因为我希望图像/可单击区域根据浏览器的大小动态调整大小。

这是我到目前为止的内容：

该图像在此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技巧吗？ 我正在考虑做这样的事情http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover ，但是我需要指定一个图像。 有没有一种方法可以创建动态尺寸的空白图像框，如box1（上面的CSS），因为只有将鼠标悬停在图像的某个位置时，翻转效果才会消失。

Answer 1

您可以使用图像精灵来相当简单地完成此操作，这与原始视频游戏中使用的想法相同。 最好的部分是，您只需要使用一张图像，这意味着页面将漂亮地加载，除了一些数学CSS之外就不需要其他任何内容-无需JavaScript。 它适用于所有新旧浏览器。 A List Apart的这篇文章介绍了整个过程： http : //alistapart.com/article/sprites