Нажмите на изображение, получите координаты

У меня есть стандартный HTML-тег изображения с изображением размером 100 на 100 пикселей. Я хочу, чтобы люди могли щелкнуть изображение и для этого передать X и Y, которые они нажимают, в функцию.

Координаты должны быть относительно изображения сверху и слева.

21.08.2008 08:02:12
Эта нить отвечает точно так же <a href=" bytes.com/forum/thread507079.html"> вопрос </ а > С дополнительной информацией <a href=" quirksmode.org/js/...>
Pat 21.08.2008 08:05:59
3 ОТВЕТА

Я думаю, что вы говорите о:

<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

5
5.01.2018 12:49:37

из того, что вы описываете, вы должны зарегистрироваться в событии image mouse, для этого случая у вас должно быть событие image mouse button.

в функции, которую вы должны использовать

Point mousePoint = e.GetPosition( this );

это даст вам положение мыши в соответствии с верхней левой точкой в ​​пикселях.

чем на mousePointвы можете распечатать информацию X и Y.

1
22.08.2016 13:04:55

Замените холст своим изображением, и он будет работать так же

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>

1
28.10.2017 22:53:47