Highlighting An Area Of An Image Map Based On Search Text

This is a new question feeding from another question that was just answered here. I am working to highlight a

based on search text. We've accomplished that, thanks to A

Solution 1:

If you want a method without SVG, you can use the Maphilight jQuery plugin (GitHub).

I have updated your jsFiddle.

functiondoSearch(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 });
});

Note: For a better result just use a bigger image, because your bunny.jpg is too small and you have forced its size with height/width attributes.

Solution 2:

It is not possible with image-maps and area elements, because those are non visible elements, that cannot have child elements, nor styles. You would have to do it a lot more complicated like described here

But it is possible using modern embeded SVGs - Almost every browser does support it nowadays. Even IE.

I tested it with Chromium and Firefox.

It cannot be done with the help of jQuery as far as I know but with usual Javascript. The key is:

<svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"version="1.1"width="663px"height="663px"><imagexlink:href="http://webfro.gs/south/kb2/images/bunny.jpg"x="0"y="0"width="663"height="663" /><circleclass="office"cx="504"cy="124"r="94" /><circleclass="fire-exit"cx="168"cy="150"r="97" /><circleclass="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', '');
    }

});

See here in the JSFiddle. Is that the way you want it?

Share