<p>I have a standard HTML image tag with an image in it, 100 by 100 pixels in size. I want people to be able to click the image and for that to pass the X and Y that they click into a function.</p>

<p>The coordinates need to be relative to the image top and left.</p>

[{'answer_id': 19464, 'author': 'Jon Galloway', 'author_id': 5, 'author_profile': 'https://Stackoverflow.com/users/5', 'pm_score': 3, 'selected': False, 'text': '<p>I think you\'re talking about:</p>\n\n<pre><code>&lt;input id="info" type="image"&gt;\n</code></pre>\n\n<p>When submitted, there are form values for the x and y coordinate based on the input element id (<code>info.x</code> and <code>info.y</code> in this case).</p>\n\n<p><a href="http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.4.1" rel="nofollow noreferrer">http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.4.1</a></p>\n'}, {'answer_id': 1222641, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 1, 'selected': False, 'text': '<p>from what you describe you should register to the image mouse event, for this case you should have the image mouse button event.</p>\n\n<p>at the function you should use </p>\n\n<pre><code>Point mousePoint = e.GetPosition( this );\n</code></pre>\n\n<p>that will give you the mouse position according to the top left point int pixels.</p>\n\n<p>than at the <code>mousePoint</code> you can print the X and Y information. </p>\n'}, {'answer_id': 46995289, 'author': 'TessavWalstijn', 'author_id': 7185314, 'author_profile': 'https://Stackoverflow.com/users/7185314', 'pm_score': 1, 'selected': False, 'text': '<p>Replace the canvas with your image and it will work the same</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-js lang-js prettyprint-override"><code>let img = document.getElementById("canvas");\r\n\r\nimg.x = img.getBoundingClientRect().left;\r\nimg.y = img.getBoundingClientRect().top;\r\n\r\nfunction click(e) {\r\n  document.getElementById("output").innerHTML = "X coords: " + (e.clientX - img.x) + "&lt;br&gt; Y coords: " + (e.clientY - img.y);\r\n}\r\n\r\nimg.addEventListener("click", click);</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--- Like a image ---&gt;\r\n&lt;canvas id="canvas" width="100" height="100"&gt;&lt;/canvas&gt;\r\n&lt;p id="output"&gt;&lt;/p&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}]
['https://Stackoverflow.com/questions/19461', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1384652/']