Highlighting an area of an image map based on search text

Question

This is a new question feeding from another question that was just answered here.

I am working to highlight a <div> based on search text. We've accomplished that, thanks to Alex.

Now, I'm trying to apply the same concept to mapped coordinates on an image map.

There's a jsfiddle here.

Here's the JS(jQuery 1.10.2)...

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

Answer 1

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

I have updated your 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 });
});

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.