基于搜索文本高亮显示图像地图的区域

Highlighting an area of an image map based on search text

本文关键字：显示图 显示 图像 地图 区域 高亮 文本 于搜索 搜索      更新时间：2023-09-26

这是一个新问题，源于这里刚刚回答的另一个问题。

我正在努力突出显示基于搜索文本的<div>。多亏了亚历克斯，我们才做到了这一点。

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

这里有一把小提琴。

这是JS（jQuery 1.10.2）…

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

如果你想要一个没有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太小，并且您使用了高度/宽度属性来强制调整其大小。

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

但是使用现代嵌入式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', '');
    }
});

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

相关文章：