Question

我想在重叠的透明图像上添加翻转效果。

例如：

以下图片分为5个部分，我想在每个部分添加翻转效果（不同的图像）

enter image description here

当尝试使用div或img标签时，图像呈现为矩形，因此翻转效果不正确。当我在黄色之间的绿色部分上翻转时，黄色图像会突出显示，因为它的z-index很高。

以下是我尝试过的代码：

<body>
<br />
<img src="part1.png" onclick="console.log('test1');"/>
<img src="part2.png" onclick="console.log('test2');" style="position:absolute; left:30px; top: 19px;"/>
<img src="part3.png" onclick="console.log('test3');" style="position:absolute; left:70px; top: 15px;"/>
<img src="part4.png" onclick="console.log('test4');" style="position:absolute; left:95px; top: 16px;"/>
<img src="part5.png" onclick="console.log('test5');" style="position:absolute; left:123px; top: 24px;"/>    
</body>

images =＆gt; part1 ， part2 ， part3 ， part4 ， part5

如果可能，我不想使用jQuery。

Answer 1

我做这种事情的方法是放置所有图像元素，然后在顶部放置一个大的不可见（透明）图像（CSS中的“大”，文件实际上是1x1像素）。然后将图像映射应用于最顶层的图像。结果可以在这里看到：http://pokefarm.org/

Answer 2

感谢Kolink和其他人的回复。我试图创建像Kolink建议的图像地图，但这太难了，如果我对图像稍作改动，那么我将不得不创建一个新的图像地图。

我用 flash swf 文件替换了这部分。我很容易在flash中创建这种东西。

javascript - 重叠透明图像的翻转效果

2 个答案: