如何在地图（html）坐标上设置图像或颜色？

Question

I am trying to use colors in the coordinates of map instead of the transparent clickable space. When I click the circle (I am working only with circles) the colour should change (example from red to blue).

I have tried with background-color but this doesn't work, I think the correct way to do this is with javascript or jquery.

<img src="mapworld.jpg" width="600" height="400" alt="mapworld" usemap="#mapworld">
<map name = "mapworld">
  <area id = "s1" target="_blank" alt="Circle1" title="Position 1" 
        href="www.google.com.ec" coords="10, 20, 4" shape="circle">
</map>

Answer 1

After doing some research I have discovered this JQuery library which takes care of highlighting areas automatically and all you have to do is call the .maphilight() on your image when the document is ready .

You will need to download and implement these two files in your html file:

JQuery: https://code.jquery.com/jquery-3.3.1.min.js

This one will have to be in a seperate file and included after JQuery (in your html file ofc).
MapHighlight lib: https://raw.githubusercontent.com/kemayo/maphilight/master/jquery.maphilight.js

Here's a JSFiddle to show a demo : http://jsfiddle.net/8Lw7saf6/1/

Usage:

/* JQUERY */
$(document).ready(function(){

    $('img[usemap]').maphilight();

});

here are two demos from the doc :
https://davidlynch.org/projects/maphilight/docs/demo_usa.html
https://davidlynch.org/projects/maphilight/docs/demo_world.html