JSFiddle - React, Tailwind, and code Playground

HTML

<img id="dotted" src="http://upload.wikimedia.org/wikipedia/commons/a/a0/Measel_cue_ball_cropped.jpg" usemap="#ballmap" alt="sample" />
<img id="solid" src="http://upload.wikimedia.org/wikipedia/commons/1/19/Sinuca.jpg" usemap="#ballmap2" alt="sample" />

        <map name="ballmap">
        <area shape="circle" coords="210,120,90" href="#" alt="dotted ball" title="dotted ball" onclick="clickedMe(this);">
        </map> 
<map name="ballmap2">
        <area shape="circle" coords="126,90,70" href="#" alt="solid ball" title="solid ball" onclick="clickedMe(this);">
        </map>

CSS

#solid{
 position: absolute;
 top:250px;
 left:250px;
 width:240px;
height:200px;    
}

JavaScript

function clickedMe(item) {
    var mapName;
    mapName = $(item).parent().attr('name');
    $('img').each(function(){
        if($(this).attr('usemap') == '#'+mapName){
            alert($(this).attr('id'));            
        }       
    });
}