鼠标悬停在网页上时突出显示映射图像的部分答案

【问题标题】：Highlight Section of Mapped Image when Mouseover Text on Webpage鼠标悬停在网页上时突出显示映射图像的部分
【发布时间】：2010-12-24 21:13:24
【问题描述】：

场景：

映射了多个区域的图像。
页面上的文本列表

所需功能：当我将鼠标悬停在列表中的不同文本上时，映射图像中的相应区域将突出显示。

有谁知道可以做到这一点的好的 javascript 工具吗？

我找到了一个 jquery 插件 (map hilight)，当您将鼠标移到图像本身上时，它会突出显示图像的部分。我正在寻找下一步 - 从图像外部的来源触发高光。

【问题讨论】：

标签： javascript jquery html image highlighting

【解决方案1】：

Highslide 并不是你想要的，but worth a look.

【讨论】：

【解决方案2】：

我查看了您提到的插件的源代码，应该很容易扩展它，以便它可以做您想做的事情，这里有一些提示：

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); });
}

这是所有事件魔术发生的地方。鼠标悬停功能用于突出显示区域。\

在您的代码中，您可以尝试通过执行以下操作来找到要突出显示的区域坐标：

$(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。

希望这会有所帮助！

【讨论】：

我有点关注你 - 函数会是什么样子以及如何在 html 中调用它？

【解决方案3】：

虽然这不是超级优雅，但您可以手动触发相关区域元素的鼠标悬停事件：

<a href="..." onmouseover="$('#certain-area')
       .trigger('mouseover');">link text</a>

mouseout 也一样。当然，这比使用onmousover 和onmouseout 更好。

【讨论】：