场景:
- Map了多个区域的图像。
- 页面上的文本列表
所需功能:当我将鼠标悬停在列表中的不同文本上时,Map图像中的相应区域将高亮显示。
有没有人知道一个好的javascript工具可以做到这一点?
我发现了一个jquery插件(map hilight),当你将鼠标移到图像本身时,它会高亮显示图像的一部分。我正在寻找下一步-从图像外部的源触发高亮显示。
场景:
所需功能:当我将鼠标悬停在列表中的不同文本上时,Map图像中的相应区域将高亮显示。
有没有人知道一个好的javascript工具可以做到这一点?
我发现了一个jquery插件(map hilight),当你将鼠标移到图像本身时,它会高亮显示图像的一部分。我正在寻找下一步-从图像外部的源触发高亮显示。
4条答案
按热度按时间lztngnrs1#
我看了你提到的插件的源代码,扩展它应该相当容易,这样它就可以做你想做的事情,这里有一些提示:
jquery.maphighlight.js的第127-136行:
这是所有事件魔术发生的地方。鼠标悬停功能用于突出显示某个区域。
在你的代码中,你可以尝试找到你想要突出显示的区域坐标,方法如下:
其中,
id_of_the_area
是您为要突出显示的<area>
标记指定的ID。如果你把它放到一个函数中,你可以从任何你需要的地方调用它。
编辑:
根据你在评论中的问题,这里有一些更多的提示:
突出显示/取消突出显示区域的函数可能如下所示:
在这个例子中,
id_of_map
和id_of_canvas
是map和canvas元素的id。mouseover
或clear_canvas
函数和map
或canvas
变量的作用域可能是一个问题。您需要小心放置这些代码的位置。我建议在尝试添加此功能之前阅读一下jquery插件。在jquery中,你可以将事件附加到任何html元素上。像这样:
id_of_element将是您希望触发突出显示的元素的id。
希望这有帮助!
dtcbnfnu2#
虽然这不是非常优雅,但您可以手动触发所讨论的area元素的mouseover事件:
当然,这比使用
onmousover
和onmouseout
更好。ie3xauqp3#
Highslide不是你想要的but worth a look.
tuwxkamq4#
public void run(){