0

I have an image on a page. I want to be able to click all over the image and at the point of click output the x/y position (coordinates), for each click. How can I do that?

NOTE: I already know how to get the x/y coordinate. My question centers around how do I write the x/y coordinates to the screen at those exact coordinates?

I suppose on the click even of the image I would dynamically write an inline div with the text coordinates in it. But I have no idea how to implement that. Thanks!

0

4 Answers 4

2

Here is a working snippet. Idea is to bind a click event to the img element and on click create a dynamic span tag and set its top and left css property to event.offsetY and event.offsetX respectively. This will make sure the span is places exactly where the click happened.

$('img').on('click',function(e){
  var span = "<span style='position:absolute;top:"+e.pageY+"px;left:"+e.pageX+"px'>"+e.offsetX +","+ e.offsetY+"</span>"
  $('body').append(span);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRGXr0yFkbJ07wEoT9Eg1nO2nA2Vsr8g5wXKRk4BkUPudku-BwC8Q" alt="my image" style="margin:50px;">

2
  • You should position with pageX and pageY in the CSS, otherwise this would only work if the image was in the top left corner of the page (like in the snippet). You can already see an issue here from the default margins of body offsetting the click location from the text location.
    – 4castle
    Apr 19, 2016 at 3:15
  • @4castle thanks for pointing that out. I updated my answer. If you were the downvoter could you please remove the downvote? Apr 19, 2016 at 8:50
0
window.onclick = function(e){
  var x = e.clientX;
  var y = e.clientY;
  console.log(x, y);
};
0

Use offsetX and offsetY from MouseEvent to find the coordinate of the click within the image, and use pageX and pageY to get the coordinate needed to position a <span> element at that location:

$("img").click(function(e) {
  $("<span></span>")
    .css({
      position: "absolute",
      left: e.pageX,
      top: e.pageY
    }).text("(" + e.offsetX + ", " + e.offsetY + ")")
    .appendTo("body");
});

$("img").click(function(e) {
  $("<span></span>")
    .css({
      position: "absolute",
      left: e.pageX,
      top: e.pageY
    }).text("(" + e.offsetX + ", " + e.offsetY + ")")
    .appendTo("body");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://i.stack.imgur.com/aGtYm.png" />

0

You can add a container to the image

<div class="image-container">
    <img src="image.jpg" alt="my image">
</div>

Apply a position relative to the container and absolute to the coordinates

.image-container {
    position: relative;
}

.image-container .coords {
    position: absolute;
}

Then add a click event to the image

$('.image-container img').click(function (e) {
    var img = $(e.currentTarget);

    //get the point relative to the container
    //if you want it relative to the window, get pageX/pageY instead
    var x = e.offsetX;
    var y = e.offsetY;

    var coords = $('<div class="coords"></div>');
    coords.text(x + ', ' + y);

    var container = img.parent();
    coords.css({
        left: x + 'px',
      top: y + 'px'
    });
    container.append(coords);
});

Here's a jsfiddle

1
  • 1
    In future, avoid using images which are NSFW (not safe for work). If you're stuck for a source for images, I recommend placekitten.com; everyone likes cats; whether they're at work or home, young or old!
    – Matt
    Apr 22, 2016 at 6:11

Not the answer you're looking for? Browse other questions tagged or ask your own question.