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

图像多个区域的翻转效应

1 个答案: