有没有办法使图像的非透明部分触发鼠标悬停事件呢？
如果鼠标移动到透明区域，则应触发鼠标离开事件，并且脚本应该监听图像下方层上任何鼠标悬停事件。
是否可能实现？感谢任何帮助。
编辑： 我想在不使用Flash的情况下实现这一点。
6个回答
7
您可以使用传统的<map>和<area>标签来使用图像。 <area>标签可以触发JavaScript鼠标事件（一个例子是这个jQuery插件：jQuery maphilight）。
然而，没有好的方法来动态创建地图 - 您将不得不手动创建它，或调用服务器端服务来映射它。
- Kobi
3
谢谢。这给了我一些继续的方向。让我等待并看看是否能得到更多答案。 - Nirmal
这很可能是你最好的选择。越来越不好的想法包括a)在图像的非透明部分上覆盖透明div并将点击事件添加到这些div；和b)使用Flash，但那应该是最后的选择。 - Justin Johnson
正如你所说，我最终使用了经典的图像地图。没有找到其他好的方法来处理它而不使用 Flash。我的客户网站将面临相对较慢的连接，因此必须从代码中压缩每个千字节。谢谢！ - Nirmal
3
ImageMapster 看起来是一个很好的、易于使用的跨浏览器实现图像区域映射的方式（需要jQuery，支持IE6+）。
另一种选择是使用 raphael.js 创建 SVG 向量图像，可以在 IE6 及以上版本的所有浏览器中使用（除了某些旧版 Android 手机的默认浏览器）。这些图像可以通过 JavaScript 进行各种控制，并且可以具有所有标准事件，例如鼠标悬停、单击等。
Raphael 在这里比 Flash 选项更好，因为它不依赖于 Flash。它比区域映射选项更复杂，学习曲线较陡峭，但对于复杂情况和动态变化的形状，它带来了额外的好处，即可以通过多种方式控制创建的向量图像。
- user56reinstatemonica8
1
你可以绘制出图像的透明部分（以这个色度键示例为例，在某些浏览器中，您可以在客户端代码中执行此操作），然后比较
mousemove事件上事件的位置，看看指针是否悬停在透明部分上。然后，您只需要添加一个变量来跟踪上次检查时它是否在该部分上方。- Quentin
0
据我所知，目前还无法检测图像的透明部分。
- Sarfraz
0
你可以创建一个高度固定的子 div，大小大约与透明区域相同，绝对定位在其上方，背景和边框为空白，然后添加你的脚本来激活该 div 或其中的内容。
- Kyle
-1
如果使用Flash，这是可能的。
以下是一些提示：
- 使用Flash加载不成比例的图像，在Flash中编写右键单击事件处理程序（并在单击时将其传递给JavaScript）
- 使用透明标志加载Flash对象
- 将对象或嵌入标记设置为非常大的zIndex，例如9999，以使其置于顶部
- YOU
5
为什么要使用“click”事件？在Flash中，如何确定图像的哪些部分是透明的，以便知道在哪里放置事件？ - Quentin
@David，在Flash中，如果您在图像上附加单击事件，则仅可以在非透明区域执行。我现在没有示例可展示，但我肯定已经完成并看到其他人完成过。 - YOU
点击事件如何帮助检测鼠标移动到非透明区域时？ - Quentin
@David，你知道Flash可以在每个对象内部编写代码，比如图片，而且图片可以是png或gif格式，Flash能够理解图片的透明度，并且将点击事件放置在图片内部只能钩住可见部分。嗯，我明白如果没有看到示例很难理解。 - YOU
看起来楼主刚才提到他不想使用Flash，所以也许我会在有机会的时候去做这件事。 - YOU
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接