JSFiddle - React, Tailwind, and code Playground

by zur4ik

HTML

<div class="container">
    <img src="http://www.delhitourism.gov.in/delhitourism/images/india_map.jpg" width="500" height="400" />
    
</div>

CSS

.container {
    position: relative;
    width: 500px;
    height: 400px;
}

.container img {
    position:absolute;
    z-index:1;
    display:block;
}

.point {
    position: absolute;
    z-index:99;
    display: block;
    width: 15px;
    height: 15px;
    background: url('http://www.mattplapp.com/wpcore/wp-content/uploads/2010/07/Bullseye1-300x300.jpg');
    background-size: 15px 15px;
}

JavaScript

$(document).ready(function() {
  $('img').click(function(e) {
    var offset = $(this).offset();
    var xPos = e.clientX - offset.left;
    var yPos = e.clientY - offset.top;
      
      $('.container').append('<span class="point"></span>');
      $('.point:last-child').css({'top':yPos, 'left':xPos});
  });
});