在网页上突出显示鼠标切换文本时映射图像的部分
设想情况：
- 具有多个区域映射的图像。
- 页面上的文本列表
所需的功能:当我在列表中的不同文本上滑动时，映射图像中的相应区域将被高亮显示。
有人知道一个好的javascript工具可以做到这一点吗？
我已经找到了一个jquery (地图hilight)，当您将鼠标移动到图像本身时，它将突出显示图像的部分。我正在寻找下一个步骤-触发高光从外部的图像源。
回答 3
Stack Overflow用户
发布于 2009-12-09 15:46:53
我查看了您提到的插件的源代码，扩展它应该是相当容易的，这样它就可以完成您希望它做的事情，这里有一些提示：
Jquery.maphighlight.js的第127-136行：
mouseover = function(e) {
var shape = shape_from_area(this);
add_shape_to(canvas, shape[0], shape[1], $.metadata ? $.extend({}, options, $(this).metadata()) : options);
};
if(options.alwaysOn) {
$(map).find('area[coords]').each(mouseover);
} else {
$(map).find('area[coords]').mouseover(mouseover).mouseout(function(e) { clear_canvas(canvas); });
}这是所有事件魔法发生的地方。mouseover函数用于突出显示一个区域。
在代码中，您可以尝试通过执行以下操作来查找要突出显示的区域坐标：
$(map).find('#id_of_the_area[coords]').each(moseover);其中，id_of_the_area将是您要突出显示的<area>标记的id。
如果你把它放入一个函数中，你可以在任何需要它的地方调用它。
编辑：
根据您在评论中的问题，下面是一些更多的提示：
突出显示/取消突出显示区域的功能可能如下所示：
function highlight(e) {
$(map).find('#id_of_the_area[coords]').each(moseover);
}
function unHighlight(e) {
clear_canvas($(canvas));
} 在本例中，id_of_map和id_of_canvas将是映射和画布元素的id。
mouseover或clear_canvas函数以及map或canvas变量的范围可能是一个问题。您需要小心放置这些代码的位置。在尝试添加此功能之前，我建议先阅读一下jquery插件。
在jquery中，可以将事件附加到任何html元素。如下所示：
$('#id_of_element').mouseover(highlight);
$('#id_of_element').mouseout(unHighlight);id_of_element将是要触发高亮显示的元素的id。
希望这能有所帮助！
Stack Overflow用户
发布于 2009-12-09 15:48:45
虽然这并不是超优雅的，但您可以手动触发有关区域元素的mouseover事件：
<a href="..." onmouseover="$('#certain-area')
.trigger('mouseover');">link text</a>鼠标也是一样的。当然，这比使用onmousover和onmouseout要好得多。
Stack Overflow用户
发布于 2009-12-09 15:33:38
高幻灯片不是你要的，但值得一看。
https://stackoverflow.com/questions/1874666
复制相似问题
腾讯云开发者
