这是一个新问题，来自刚刚回答的另一个问题 here。
我正在努力根据搜索文本突出显示<div>。感谢 Alex，我们已经做到了。
现在，我正在尝试将相同的概念应用于图像地图上的映射坐标。
有一个 jsfiddle here。
这里是 JS(jQuery 1.10.2)...
function doSearch(text) {
$('#content div').removeClass('highlight');
$('#content div:contains(' + text + ')').addClass('highlight');
}
【问题讨论】：
标签： javascript jquery html highlight imagemap
如果你想要一个没有 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 太小，并且您已通过高度/宽度属性强制其大小。
【讨论】：
width="100%" 和height="auto"，它在整个页面上重复了图像。这是包含在外部 maphilight.js 脚本中的东西吗？
backgroundSize: this.width +"px " + this.height + "px",
图像映射和区域元素是不可能的，因为它们是不可见的元素，不能有子元素，也不能有样式。您将不得不像here 描述的那样复杂得多
但是有可能使用现代的嵌入式 SVG - 现在几乎每个浏览器都支持它。甚至是 IE。
我使用 Chromium 和 Firefox 对其进行了测试。
据我所知，它不能在 jQuery 的帮助下完成，而是使用通常的 Javascript。关键是：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="663px" height="663px">
<image xlink:href="http://webfro.gs/south/kb2/images/bunny.jpg" x="0" y="0" width="663" height="663" />
<circle class="office" cx="504" cy="124" r="94" />
<circle class="fire-exit" cx="168" cy="150" r="97" />
<circle class="main-exit" cx="378" cy="589" r="48" />
</svg>
_
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', '');
}
});
见here in the JSFiddle。这是你想要的方式吗？
【讨论】：