如何使javascript在悬停和单击期间忽略透明图像区域

Question

我找到了许多关于这个主题的帖子，但似乎没有一个能满足我的特定需求。我的最终目标是使用 html5、css3 和 javascript 重现 Nike ID 基于 Flash 的自定义。

我立即的下意识反应是将图像切成许多不规则形状的图像切片。然后使用一些图像编辑软件（photoshop 等）为每个图像切片创建额外的副本，每个副本带有不同的颜色配置文件。最后，我会以这样一种方式定位所有图像切片，它们会重新组合原始图像，有点像拼图游戏。

这就是我碰壁的地方。每个此类图像切片的不规则形状的本质将导致其某些区域是透明的。更复杂的是，其中一些透明区域必然位于底层图像切片的活动切片区域之上，从而阻止后者注册悬停和单击鼠标动作。当然，有很多关于如何使 javascript 忽略透明区域的帖子。但是，我还没有遇到一个解决方案，透明区域会真正透明，从而允许底层图像注册鼠标交互。

所以问题是是否有办法让透明区域真正透明？还是我错了？

任何建议将不胜感激！谢谢。

Answer 1

这可以通过<map> 和<area> 标签来实现。

http://www.image-maps.com/ 允许您上传图像并为您生成 HTML 代码。您需要做的就是拖动某些区域。