基于搜索文本突出显示图像映射的区域

这是一个新问题，来自另一个问题，这个问题在这里得到了解答。

我正在努力突出显示基于搜索文本的

。 我们已经完成了，感谢Alex。

现在，我正在尝试将相同的概念应用于图像映射上的映射坐标。

这里有一个jsfiddle。

这是JS（jQuery 1.10.2）……

 function doSearch(text) { $('#content div').removeClass('highlight'); $('#content div:contains(' + text + ')').addClass('highlight'); } 

Answer 1

如果你想要一个没有SVG的方法，你可以使用Maphilight jQuery插件（ GitHub ）。

我已经更新了你的jsFiddle 。

 function doSearch(text) { $('#content div').removeClass('highlight'); $('#content div:contains(' + text + ')').addClass('highlight'); $('#Map area').mouseout(); $('#Map area[data-text*="' + text + '"]').mouseover(); } $(function() { $('#imgmap').maphilight({ stroke: false, fillColor: "ffff00", fillOpacity: 0.6 }); }); 

注意：为了获得更好的结果，只需使用更大的图像，因为你的bunny.jpg太小而你强迫它的大小有高度/宽度属性。

Answer 2

图像映射和区域元素是不可能的，因为它们是不可见的元素，不能有子元素，也不能有样式。 如此处所描述的那样，你必须做得更复杂

但是可以使用现代嵌入式SVG – 现在几乎每个浏览器都支持它。 甚至是IE。

我用Chromium和Firefox测试了它。

据我所知，它不能在jQuery的帮助下完成，但通常使用Javascript。 关键是：

_

 var svgns="http://www.w3.org/2000/svg"; var areas = document.getElementsByTagNameNS(svgns, 'circle'); $(areas).each(function(elem) { if(areas[elem].className.baseVal === text) { areas[elem].className.baseVal += ' highlightsvg'; } else { areas[elem].className.baseVal = areas[elem].className.baseVal.replace(' highlightsvg', ''); } }); 

请参阅JSFiddle中的这里 。 这是你想要的方式吗？