I've got a png 800x800. After clicking on a certain position(pixel) on the image, let's say 200x300 I want to save these coordinates.

What would be an approach to get these coordinates relative to the image when clicking it?

I don't expect you to just give me the code, reference would be also good.

I've got a png 800x800. After clicking on a certain position(pixel) on the image, let's say 200x300 I want to save these coordinates.

What would be an approach to get these coordinates relative to the image when clicking it?

I don't expect you to just give me the code, reference would be also good.

• javascript
• image

• 1 PHP will not be a tool available to you, PHP is server side. – chris85 Commented Sep 13, 2017 at 19:18
• @chris85: So how do you save data with only a client side programming language? It is possible, but probably not what 0x45 wants. – KIKO Software Commented Sep 13, 2017 at 19:19
• 2 @KIKOSoftware The question is not about saving. What would be an approach to get these coordinates relative to the image when clicking it? – chris85 Commented Sep 13, 2017 at 19:20
• @chris85: Yes, that is true. However the question also mentions: I want to save these coordinates., as you might have read, and Don't Panic also did (past tense!). – KIKO Software Commented Sep 13, 2017 at 19:24

4 Answers 4

Actually an <input type="image"> html element does exactly what you need.

<form action="/action_page.php" method="post">
  <input type="image" src="https://68.media.tumblr./avatar_c5ab8cc59f62_128.png" alt="Submit" width="128" height="128">
</form>

When clicked, submits the form and returns coordinates of the click within the image in x & y variables (POST or GET, depending on the form's method attribute).

demo : https://www.w3schools./html/tryit.asp?filename=tryhtml5_input_height_width

You have to start with an image

<img id="something" src="some_image.png">

Then you'd need an event handler

document.getElementById('something').addEventListener('click', fn);

Then you'd need the fn function you're calling in the event handler

function fn(event) { ... }

Inside that event handler, you can now get the coordinates from the event object

function fn(event) {
     var x = event.clientX;
     var y = event.clientY;
}

clientX and clientY will give you the coordinates relative to the element you're clicking, in this case the image, where the upper left corner is 0, 0

If you wanted to save that, you could use localStorage

function fn(event) {
     var x = event.clientX;
     var y = event.clientY;

     localStorage.setItem('coords', '{"x":"'+x+'", "y":"'+y+'"}');
}

and when you want to get it back, it's

var coords = JSON.parse( localStorage.getItem('coords') )

you can simply use mouse click event :

function Coords(event) {
    var x = event.clientX;
    var y = event.clientY;
    var coords = "X : " + x + ", Y : " + y;
    document.getElementById("coords").innerHTML = coords;
}

DEMO:http://jsbin./hucoliyane/1/edit?html,js,output

:)

Using jQuery we can get the clicked position. The corresponding code snippet is here below with the demo.

$("#imageId").click(function(e){
   var parentOffset = $(this).parent().offset(); 
   //or $(this).offset(); if you really just want the current element's offset
   var relX = e.pageX - parentOffset.left;
   var relY = e.pageY - parentOffset.top;
   console.log("X : "+relX);
   console.log("Y : "+relY);

});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img id="imageId" alt="image" src="http://www.builtinchicago/sites/default/files/imagecache/opengraph/pany_logos/some_logo_blue_2_1_copy.png">