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

我试图对图像的特定部分产生翻转效果。因此，取决于图像上的哪个区域会变成不同的图像。我也希望图片的这些部分可以点击。我不认为我可以简单地映射我想要进行翻转和链接的区域，因为我希望根据浏览器的大小动态调整图像/可点击区域的大小。对图像的多个区域产生翻转效果

这是我到目前为止有：

的形象是这样的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），因为只有当鼠标悬停在图像的特定位置上时，翻转效果才会消失。

来源

2013-07-24 wpakt

尝试图像映射：http://www.tutorialspoint.com/javascript/javascript_image_map.htm – DevlshOne

请**避免w3schools **;阅读本文：http://www.w3fools.com/ – ANeves

@DevlshOne通过提供坐标，当我更改浏览器的大小时，它是否也随着图像动态调整大小？ – wpakt

你可以很简单地用图像精灵来做到这一点，这与原创电子游戏中使用的相同。最好的部分是，你只需要使用一个图像，这意味着页面将会加载得很漂亮，除了一些数学CSS之外别无它物 - 没有javascript。它适用于所有新旧浏览器。本文来自A List Apart解释整个过程：http://alistapart.com/article/sprites

来源

2013-07-24 03:08:43 samrap

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

回答

相关问题