JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div id="plan-boutiques"><img src="http://www.ajpn.org/images-comms/1312352227_rodez.JPG"></img>
    <a href="" id="first_element"><p></p></a>
    <a href="" id="second_element"><p></p></a>
    <a href="" id="third_element"><p></p></a> 
  </div>
</div>

CSS

#plan-boutiques > img {
  width: 100%;
  height: auto;
  max-width: 685px;
  max-height: 374px;
 }
.container {
  width:100%; 
  margin:0 auto;
}

 #plan-boutiques a {
  background-color: red;
  border-radius: 100px;
  background-repeat: no-repeat;
  display:block;
  height:10px;
  width:10px;
  position:absolute;
  line-height: 25px;
  color:#fff;
  text-align:center;
  font-size:1px;
  background-position: 0 -27px;
 }

#plan-boutiques a:hover {
  background-position: 0 0;
}  
a#first_element {
  margin-left: 20px;
  margin-top: -30px;
}

a#second_element {
  margin-left: 80px;
  margin-top: -90px;
}
a#third_element {
  margin-left: 40px;
  margin-top: -60px;
}

JavaScript

var imageWidth = parseInt($('img').css('max-width'));
var imageHeight = parseInt($('img').css('max-height'));

var responsiveImageWidth = parseInt($('img').width());
var responsiveImageHeight = parseInt($('img').height());

var percentChangeInWidth = 1 - (responsiveImageWidth / imageWidth);
var percentChangeInHeight = 1 - (responsiveImageHeight / imageHeight);  

$('a').each(function(){
    var mTop = parseInt($(this).css('margin-top'));
    var mLeft = parseInt($(this).css('margin-left'));
    var changedMarginLeft = mLeft*percentChangeInWidth;
    var changedMarginTop = mTop*percentChangeInHeight;
    console.log(changedMarginLeft, changedMarginTop);
    $(this).css({
        marginTop: mTop - mTop*percentChangeInHeight,
        marginLeft: mLeft - mLeft*percentChangeInWidth
    });
    $(this).css({
        //marginTop: mTop,
        //marginLeft: mLeft
    });
});