Javascript | Location of X and Y clicked on image

Question

I am trying to get the position of an x and y location that is clicked when on a image. The reason is because I want to be able to add a spot to this image which will display some information about where it is. The spot will be dynamically loaded from a SQL database, but that isn't the concern at the minute.

I've had a look on Stack and I've seen a few questions where it says to use e.pageX - element.offsetLeft for the x location and e.pageY - element.offsetTop however placing a div on the page with a style equal to the coordinates for example <div style="position: absolute; top: 253px; left: 50px;></div> it doesn't appear anywhere near where I want it too. Left being the x and top being the y

So in a summary this is what I am trying to achieve:

• Light box appears in the middle of the screen with the selected image on.
• When clicking on the image, the x and y get calculated and I can then use these to position a element via css to be exactly where they clicked on the image.

 var $imgCont = $('#img-wrap'), $img = $('#img') $img.click(function(e) { var pos = { left: e.pageX - $img.offset().left, top: e.pageY - $img.offset().top } $('<div class="box">').css(pos).appendTo($imgCont) }) 

 #img-wrap { position: absolute; background-color: rgba(0,0,0,.7); width: 100%; height: 100%; top: 0; left: 0; display: flex; justify-content: center; align-items: center; } .box { width: 16px; height: 16px; position: absolute; background: red; z-index: 100 } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Click image to add boxes</p> <div id="img-wrap"> <img id='img' src=http://via.placeholder.com/400x400 "> </div> 

Answer 1

Make sure the image is wrapped in a container with position and append to that same container

 var $imgCont = $('#img-wrap'), $img = $('#img') $img.click(function(e) { var pos = { left: e.pageX - $img.offset().left, top: e.pageY - $img.offset().top } $('<div class="box">').css(pos).appendTo($imgCont) }) 

 #img-wrap { position: relative; margin: 60px 0 0 60px; border: 1px solid green; padding: 2px; width: 400px } .box { width: 16px; height: 16px; position: absolute; background: red; z-index: 100 } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Click image to add boxes</p> <div id="img-wrap"> <img id='img' src=http://via.placeholder.com/400x400 "> </div> 

Answer 2

You could use the offsetY and offsetX of the click event argument

<div>
  <p>
    Your image
  </p>
  <div id='container' style="position:relative">
    <img id="myImage" src="http://lorempixel.com/200/120/" />
  </div>

$(document).ready(function() {
  $(myImage).click(
    function(e) {

      var $newContainer = $("<div>You Clicked here</div>");

      $newContainer.css({
        position: 'absolute',
        top: e.offsetY,
        left: e.offsetX,
        height: '20px',
        'background-color': "red"
      });

      $(container).append($newContainer)
    }
  );
});

also see fiddle