JSFiddle - React, Tailwind, and code Playground

HTML

<div class="map-container">
    <img id="thin" src="http://i.imgur.com/U3MaB.png" rel="1" />
    <img id="muscles" src="http://i.imgur.com/ThYBn.png" rel="2" />
    <img id="rotund" src="http://i.imgur.com/1i1nw.png" rel="3" />
    <img id="blank"  src="http://web-scholar.com/stackoverflow/images/blank.gif" usemap="#sml" />
</div>

<map name="sml">
   <area shape="poly" coords="84,17,77,39,83,58,84,69,74,71,69,129,71,168,77,183,86,187,91,265,83,279,105,285,127,283,119,262,120,212,120,180,132,173,129,112,120,67,109,59,112,37,108,23,99,14" href="#" alt="thin" /> 
    <area shape="poly" coords="292,21,289,38,280,46,289,61,256,75,253,107,257,129,251,149,256,170,262,198,271,195,280,187,286,212,284,235,292,272,281,284,309,286,344,282,336,267,344,245,339,212,347,176,344,146,348,182,358,190,373,194,376,173,374,141,365,102,362,73,329,60,329,42,319,25,305,19" href="#" alt="muscles" />
    <area shape="poly" coords="535,19,530,26,519,58,505,79,488,102,485,125,483,167,493,202,504,216,519,275,521,283,562,287,583,216,605,161,597,101,575,76,568,57,570,45,554,22,545,19" href="#" alt="rotund" />
 </map>
<div>
    <script type="text/javascript">

     document.write( regionId )   
        
     </script>
    
</div>

CSS

.map-container{
    position:relative;
    border:1px solid red;
    width:671px;
    height:300px;
}
.map-container img{
    position:absolute;
    top:0;
    left:0;
    opacity:0.4;
}
.map-container img.hover{
    opacity:0.5;
}
.map-container img.selected-region{
    opacity:1;
}
#blank{
    width:671px;
    height:300px;
}

JavaScript

var regionId = $('img.selected-region').attr('rel');

$('area').hover(
    function(e){
        $('#'+ this.alt).addClass('hover');
    },
    function(e){
        $('#'+ this.alt).removeClass('hover');
    })
    .click(function(e){
        $('img.selected-region').removeClass('selected-region');
        $('#'+ this.alt).addClass('selected-region');
    });