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

我已经找到了一些关于这个主题的帖子，但是没有一个能满足我的特殊需要。我的最终目标是使用html5、css3和javascript重现基于Flash的定制

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

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

那么问题是，是否有办法使透明区域真正透明？还是我在这方面完全错了？

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

这可以通过和标签实现

---

允许您上载图像并为您生成HTML代码。你所需要做的就是拖动某些区域。

我只在html5画布元素上见过这样做。这是一个使用KineticJS@haxxxton的例子，看起来更接近我想要的。我现在需要做的就是弄清楚，如果鼠标事件发生在透明区域（或根据KineticJS，非命中区域），如何将鼠标事件气泡化到下面的图像。@Olivia，这是一个很棒的工具，谢谢！我可以将任何预定义图像动态加载到选定区域吗？您所说的动态

是什么意思？通常你会这样写。我要寻找的是一种方法来选择一个区域，选择一种颜色（从另一个小部件，就像在Nike ID上一样），然后在所选区域内放置另一个带有所选颜色的预定义图像。我不能让画布只在区域中绘制颜色，因为它看起来是平面的。如果您查看Nike ID，每个图像区域都有纹理和颜色过渡（对不起，我不熟悉正确的图像术语），这就是为什么必须将预定义图像加载到选定区域的原因。使用图像地图可以吗？