У меня есть стандартный HTML-тег изображения с изображением размером 100 на 100 пикселей. Я хочу, чтобы люди могли щелкнуть изображение и для этого передать X и Y, которые они нажимают, в функцию.
Координаты должны быть относительно изображения сверху и слева.
Я думаю, что вы говорите о:
<input id="info" type="image">При отправке существуют значения формы для координат x и y на основе идентификатора входного элемента ( info.xи info.yв этом случае).
http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.4.1
из того, что вы описываете, вы должны зарегистрироваться в событии image mouse, для этого случая у вас должно быть событие image mouse button.
в функции, которую вы должны использовать
Point mousePoint = e.GetPosition( this );это даст вам положение мыши в соответствии с верхней левой точкой в пикселях.
чем на mousePointвы можете распечатать информацию X и Y.
Замените холст своим изображением, и он будет работать так же
let img = document.getElementById("canvas");
img.x = img.getBoundingClientRect().left;
img.y = img.getBoundingClientRect().top;
function click(e) {
document.getElementById("output").innerHTML = "X coords: " + (e.clientX - img.x) + "<br> Y coords: " + (e.clientY - img.y);
}
img.addEventListener("click", click);<!--- Like a image --->
<canvas id="canvas" width="100" height="100"></canvas>
<p id="output"></p>