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

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

javascript jquery html image

Javascript 鼠标悬停在网页文本上时突出显示映射图像的部分,javascript,jquery,html,image,highlighting,Javascript,Jquery,Html,Image,Highlighting,情景：已映射多个区域的图像页面上的文本列表所需功能：当我将鼠标悬停在列表中的不同文本上时，映射图像中的相应区域将高亮显示有人知道一个好的javascript工具可以做到这一点吗我发现了一个jquery插件（），当您将鼠标移到图像本身上时，它将突出显示图像的部分。我正在寻找下一步-从图像之外的源触发高光。Highslide不完全是您所要求的，Highslide不完全是您所要求的，我查看了您提到的插件的源代码，它应该很容易扩展，以便它能够实现您想要的功能，以下是一些提示： jquery

情景：

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

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

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

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

Highslide不完全是您所要求的，

我查看了您提到的插件的源代码，它应该很容易扩展，以便它能够实现您想要的功能，以下是一些提示：

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

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

其中，

id\u\u区域

将是一个id，您为该id指定了要突出显示的

标记

如果你把它放到一个函数中，你可以从任何你需要的地方调用它

编辑：

根据您在评论中提出的问题，这里还有一些建议：

高亮显示/取消高亮显示区域的功能可以如下所示：

$(map).find('#id_of_the_area[coords]').each(moseover);

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

在本例中，

id\u of_map

和

id\u of_canvas

将是map和canvas元素的id

mouseover

或

clear\u canvas

函数和

map

或

canvas

变量的范围可能存在问题。您需要小心放置此代码的位置。我建议您在尝试添加此功能之前先阅读一下jquery插件

在jquery中，您可以将事件附加到任何html元素。像这样：

$('#id_of_element').mouseover(highlight); 
$('#id_of_element').mouseout(unHighlight);

元素的id_将是要触发高亮显示的元素的id

希望这有帮助

我查看了您提到的插件的源代码，扩展它应该相当容易，这样它就可以做您希望它做的事情，这里有一些提示：