11

我有一个标准的 HTML 图像标签,里面有一个图像,大小为 100 x 100 像素。我希望人们能够单击图像并将他们单击的 X 和 Y 传递给函数。

坐标需要相对于图像的顶部和左侧。

4

3 回答 3

5

我想你在谈论:

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

提交时,x 和 y 坐标的表单值基于输入元素 id(info.xinfo.y本例中)。

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

于 2008-08-21T08:05:41.567 回答
1

根据您的描述,您应该注册到图像鼠标事件,对于这种情况,您应该有图像鼠标按钮事件。

在你应该使用的功能

Point mousePoint = e.GetPosition( this );

这将根据左上角的 int 像素为您提供鼠标位置。

比在mousePoint您可以打印 X 和 Y 信息。

于 2009-08-03T14:24:18.777 回答
1

用你的图像替换画布,它的工作原理是一样的

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>

于 2017-10-28T22:53:47.780 回答