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

时间:2013-08-28 22:06:30

标签: javascript jquery html highlight imagemap

这是一个新问题,来自刚刚回答的另一个问题here

我正在努力根据搜索文字突出显示<div>。我们已经完成了,感谢Alex。

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

有一个jsfiddle here

这是JS(jQuery 1.10.2)......

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

2 个答案:

答案 0 :(得分:0)

图像映射和区域元素是不可能的,因为它们是不可见的元素,不能有子元素,也不能有样式。你需要做的更复杂,如描述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。这是你想要的吗?

答案 1 :(得分:0)

如果您想要一个没有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 太小而且你的大小与高度/宽度属性有关。< / p>