javascript - Highlighting an area of an image map based on search text -

this new question feeding question answered here.

i working highlight <div> based on search text. we've accomplished that, alex.

now, i'm trying apply same concept mapped coordinates on image map.

there's jsfiddle here.

here's js(jquery 1.10.2)...

function dosearch(text) {     $('#content div').removeclass('highlight');     $('#content div:contains(' + text + ')').addclass('highlight'); } 

if want method without svg, can use maphilight jquery plugin (github).

i have updated 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: better result use bigger image, because bunny.jpg small , have forced size height/width attributes.