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


5

Я знаю, что это можно сделать, и у меня даже есть смутное представление о том, как это сделать, но оно перестает быть неопределенным.

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

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

Заранее благодарю за любую помощь.

+1

Эта нить ответы точно так же <a href="http://bytes.com/forum/thread507079.html">question</a> С подробнее <a href="http://www.quirksmode.org/js/events_properties.html#position">here</a> 21 авг. 082008-08-21 08:05:59

4

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

<input id="info" type="image"> 

Когда представляется, существуют значения формы для х и у координаты на основе входного элемента идентификатору (info.x и info.y в данном случае).

http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.4.1


0

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

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

Point mousePoint = e.GetPosition(this); 

, который даст вам позицию мыши по верхней левой точки ИНТ пикселей.

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


0

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

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>