仅悬停在图像的非透明部分答案

【问题标题】：Hover only on non-transparent part of image仅悬停在图像的非透明部分
【发布时间】：2010-04-22 08:38:45
【问题描述】：

有没有办法只让图像的不透明部分触发鼠标悬停事件？

如果鼠标移动到透明区域，则应触发鼠标移出，并且脚本应侦听图像下方图层上的任何鼠标悬停事件。

有可能吗？感谢您的任何意见。

编辑： 我希望在不使用 Flash 的情况下做到这一点。

【问题讨论】：

【解决方案1】：

您可以使用带有老式<map> 和<area> 标签的图像。区域标签可以触发 javascript 鼠标事件（一个使用示例是这个 jQuery 插件：jQuery maphilight）。
但是，没有动态创建地图的好方法 - 您必须手动完成，或者调用服务器端服务来映射它。

【讨论】：

谢谢。这向我展示了一些前进的道路。让我等着看能不能得到更多答案。
这可能是您最好的选择。越来越好的想法包括 a) 在图像的非透明部分上分层透明 div 并将点击事件添加到这些 div； b) 使用 Flash，但这应该是最后的手段。
如你所说，我最终使用了经典的图像映射。在没有闪光灯的情况下找不到任何其他好的方法来处理它。我客户的网站的连接速度相对较慢，因此必须从代码中删除每一千字节。谢谢！

【解决方案2】：

ImageMapster 看起来是让 图像区域地图 跨浏览器（IE6+，需要 jQuery）工作的好方法。

另一种选择是使用raphael.js，它会创建SVG 矢量 图像，这些图像被翻译成适用于IE6 以上的所有设备（我相信，除了一些旧Android 手机中的股票浏览器之外的所有设备）。它们可以通过各种方式使用 javascript 进行控制，并且可以具有所有标准事件，例如鼠标悬停、单击等。

Raphael 在这里比 Flash 选项更有效，因为它不依赖 Flash。它不如面积图选项简单，并且学习曲线陡峭，但对于复杂的情况和动态变化的形状，它带来了多种方式来控制您创建的矢量图像的额外好处。

【讨论】：

【解决方案3】：

您可以绘制出图像透明部分的位置（鉴于此 chroma-key 示例，我希望您可以在某些浏览器的客户端代码中执行此操作），然后比较事件在 mousemove 上的位置事件来查看指针是否在透明部分上。然后你只需要添加一个变量来跟踪你上次检查时它是否超过了那个部分。

【讨论】：

【解决方案4】：

据我所知，目前还无法检测到图像的透明部分。

【讨论】：

【解决方案5】：

您可以制作一个具有固定高度的子 div 到透明区域的大致大小，绝对定位在其上方，并带有空白背景和边框，然后添加脚本以激活该 div 或 div 内的内容。

【讨论】：

【解决方案6】：

这是可能的，如果您使用 Flash。

这里有一些提示

【讨论】：

为什么是 click 事件？在 Flash 中，您如何确定图像的哪些部分是透明的，以便知道在哪里放置事件？
@David，在 Flash 中，如果您在图像上附加点击事件，则只能在不透明的情况下完成。我现在没有例子可以展示，但我肯定以前做过并见过其他人。
点击事件如何帮助检测鼠标何时移过非透明区域？
@David，你知道，Flash可以像Image一样在每个对象里面写代码，图片可以是png或者gif，flash理解图片的透明度，在图片里面放click事件只能hook那部分可见的。好吧，我明白不看例子就很难理解。
看来OP刚刚提到他不想用flash，所以有机会我会做的。