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

时间:2010-04-22 08:38:45

标签: javascript html css

有没有办法只使图像的非透明部分触发鼠标悬停事件?

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

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

修改 我希望不使用闪光灯来做到这一点。

6 个答案:

答案 0 :(得分:7)

您可以将图片与旧式<map><area>标记结合使用。区域标记可以触发javascript鼠标事件(此示例使用的是此jQuery插件:jQuery maphilight) 但是,没有好的方法可以动态创建地图 - 您必须手动创建地图,或者调用服务器端服务来映射它。

答案 1 :(得分:3)

ImageMapster看起来是一个很好的简单方法,可以让图像区域地图跨浏览器工作(IE6 +,需要jQuery)。

另一种选择是使用raphael.js创建 SVG矢量图像,这些图像被翻译为可以在IE6以上的所有内容中工作(除了某些旧Android手机中的股票浏览器之外的所有内容,我相信)。它们可以通过各种方式使用javascript进行控制,并且可以包含所有标准事件,例如鼠标悬停,点击等。

Raphael在这方面比Flash选项更好,因为它不依赖于Flash。它不如区域地图选项简单,并且具有陡峭的学习曲线,但是,对于复杂的情况和动态变化的形状,它带来了各种方法的额外好处,可以控制您创建的矢量图像。

答案 2 :(得分:1)

你可以找出图像透明部分的位置(给定这个chroma-key示例,我希望你可以在某些浏览器的客户端代码中执行此操作),然后在{{{}}上比较事件的位置{1}}事件以查看指针是否在透明部分上方。然后你只需要添加一个变量来跟踪你上次检查时是否超过了那个部分。

答案 3 :(得分:0)

据我所知,到目前为止,检测图像的透明部分是不可能的。

答案 4 :(得分:0)

您可以创建一个固定高度的子div,其大小与透明区域大致相同,绝对位于空白背景和边框上,然后添加脚本以激活div或div中的内容。

答案 5 :(得分:0)

如果您使用 Flash ,则可能。

这里有一些提示

  • 使用Flash加载不成比例的图像,在flash中写入点击事件处理程序,(点击时将其传递给javascript)
  • 使用透明标志
  • 加载Flash对象
  • 将对象或嵌入标记设置为非常大的zIndex,如9999或其他东西,使其位于顶部