Change background color of HTML <area> tag

Question

I have an image with more than 100 geometrical shapes with different size and dimensions, i used image mapping over it and assign id to each like

Answer 1

I think you should use a jquery imagemap plugin ... this is my favorite

Link : http://archive.plugins.jquery.com/project/maphilight

Demo : http://davidlynch.org/projects/maphilight/docs/demo_usa.html

This topic has also been discussed in detail here .....

Using JQuery hover with HTML image map

I don't think there is need for duplication

============= Update on your comments ===================

Go to https://github.com/kemayo/maphilight/blob/master/jquery.maphilight.js

Can you see the following that maphilight accept fillColor: '000000' ;

You need to change fillOpacity to 1.0 to remove opacity

All you need to do is make with work without mouse over by editing the code below and replace with yours

        $(map).trigger('alwaysOn.maphilight').find('area[coords]')
            .bind('mouseover.maphilight', mouseover)
            .bind('mouseout.maphilight', function(e) { clear_canvas(canvas); });;

You have a working Background Color version ...

Thanks :)