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

Question

场景：

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

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

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

我找到了一个 jquery 插件（地图高亮），它将突出显示图像的部分将鼠标移到图像本身上。我正在寻找下一步 - 从图像外部的源触发高光。

Answer 1

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

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 将是您为 < code>

要突出显示的标记。

如果将其放入函数中，您可以从任何需要的地方调用它。

编辑：

根据您在评论中的问题，这里有一些更多提示：

突出显示/取消突出显示某个区域的函数可能如下所示：

function highlight(e) {
   $(map).find('#id_of_the_area[coords]').each(moseover);
} 
function unHighlight(e) {
   clear_canvas($(canvas));
} 

在此示例中 id_of_map 和 < code>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。

希望这有帮助！

Answer 2

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

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

对于 mouseout 也是如此。当然，这比使用 onmousover 和 onmouseout 更好。

Answer 3

Highslide 并不完全符合您的要求，但值得一看。

Answer 4

函数打开（）{

        var data = $('#test').mouseout().data('maphilight') || {};
        data.alwaysOn = !data.alwaysOn;
        $('#test').data('maphilight', data).trigger('alwaysOn.maphilight');
        $(".p-hover-new").css({
  "opacity": "1"
})