2

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

这是我到目前为止所拥有的：

该图像位于此 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），因为只有当你将鼠标悬停在图像的某个位置时，翻转效果才会消失。

4

1 回答 1

1

您可以使用图像精灵相当简单地做到这一点，这与原始视频游戏中使用的想法相同。最好的部分是，您只需要使用一张图片，这意味着页面将加载精美，并且只需要一些数学 css - 无需 javascript。它适用于所有新旧浏览器。A List Apart的这篇文章解释了整个过程：http ://alistapart.com/article/sprites

于 2013-07-24T03:08:43.377 回答