作业说“你的任务是编写一个包含 JavaScript 的 HTML 文件，该文件将随机显示上面的图像之一。如果在浏览器中刷新页面，你应该会得到另一张随机图像。”所以我做到了。
现在它显示“当用户单击图像上的任意位置时，显示一个警报窗口，其中显示单击相对于图像的 X 和 Y 位置”。这是我的代码：
<html>
<head>
<title>Assignment 2</title>
<script type="text/javascript">
var imageURLs = [
"p1.jpg"
, "p2.jpg"
, "p3.jpg"
, "p4.jpg"
];
function getImageTag() {
var img = '<img src=\"';
var randomIndex = Math.floor(Math.random() * imageURLs.length);
img += imageURLs[randomIndex];
img += '\" alt=\"Some alt text\"/>';
return img;
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(getImageTag());
</script>
</body>
</html>您实际上可以使用 HTML 来实现此目的。图像标签有一个名为
ismap此属性的作用是指定图像是服务器端图像映射的一部分。当点击这样的地图时，点击坐标会以 url 查询字符串的形式发送到服务器。
图像必须嵌套在链接下才能起作用。这是一个例子
<a href="http://www.google.com">
<img src="myimage.png" alt="My Image" ismap">
</a>
如果您不能为此使用图像映射，这里有一个 javascript/jquery 解决方案
首先，您需要在
body<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
$(document).ready(function() {
$("img").on("click", function(event) {
var x = event.pageX - this.offsetLeft;
var y = event.pageY - this.offsetTop;
alert("X Coordinate: " + x + " Y Coordinate: " + y);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://vignette1.wikia.nocookie.net/seraphina/images/b/b2/Dragonseraphina.jpg/revision/latest?cb=20160103194957" height="200" width="200" alt="dragon">您监听
clickevent.pageX 属性返回鼠标指针相对于文档左边缘的位置。
地图解决方案只会为您提供客户端像素坐标。如果您想获取相对于原始图像的像素坐标，您需要naturalHeight和naturalWidth信息，其中包含原始图像的高度和宽度。
代码：
// https://stackoverflow.com/questions/34867066/javascript-mouse-click-coordinates-for-image
document.getElementById(imageid).addEventListener('click', function (event) {
// https://stackoverflow.com/a/288731/1497139
bounds=this.getBoundingClientRect();
var left=bounds.left;
var top=bounds.top;
var x = event.pageX - left;
var y = event.pageY - top;
var cw=this.clientWidth
var ch=this.clientHeight
var iw=this.naturalWidth
var ih=this.naturalHeight
var px=x/cw*iw
var py=y/ch*ih
alert("click on "+this.tagName+" at pixel ("+px+","+py+") mouse pos ("+x+"," + y+ ") relative to boundingClientRect at ("+left+","+top+") client image size: "+cw+" x "+ch+" natural image size: "+iw+" x "+ih );
});
$(document).ready(function() {
$("img").on("click", function(event) {
bounds=this.getBoundingClientRect();
var left=bounds.left;
var top=bounds.top;
var x = event.pageX - left;
var y = event.pageY - top;
var cw=this.clientWidth
var ch=this.clientHeight
var iw=this.naturalWidth
var ih=this.naturalHeight
var px=x/cw*iw
var py=y/ch*ih
alert("click on "+this.tagName+" at pixel ("+px+","+py+") mouse pos ("+x+"," + y+ ") relative to boundingClientRect at ("+left+","+top+") client image size: "+cw+" x "+ch+" natural image size: "+iw+" x "+ih );
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://upload.wikimedia.org/wikipedia/commons/7/77/Avatar_cat.png" height="256" width="256" alt="kitten">示例
click on IMG at pixel (445.5,334.125) mouse pos (148.5,49) relative to boundingClientRect at (483.5,64) client image size: 640 x 480 natural image size: 1920 x 1080
$(document).ready(function () {
$("img").on("click", function (event) {
$('#img_coordinate').html("X Coordinate: " + (event.pageX - this.offsetLeft) + "<br/> Y Coordinate: " + (event.pageY - this.offsetTop));
});
});
html
<img src="img/sample.gif" />
<p id="img_coordinate"></p>
小叉子；）
$(document).ready(function() {
$('img').click(function(e) {
var offset_t = $(this).offset().top - $(window).scrollTop();
var offset_l = $(this).offset().left - $(window).scrollLeft();
w = $(this).prop("width"); // Width (Rendered)
h = $(this).prop("height"); // Height (Rendered)
nw = $(this).prop("naturalWidth") ; // Width (Natural)
nh = $(this).prop("naturalHeight") ; // Height (Natural)
var left = Math.round( (e.clientX - offset_l) );
var top = Math.round( (e.clientY - offset_t) );
x = Math.round((left*nw)/w);
y = Math.round((top*nh)/h);
// $('#img_coordinate').html("Left: " + left + " Top: " + top + "nw: "+nw+" nh: "+nh +"x: "+x+" y: "+y);
$('#img_coordinate').html("click x: "+x+" y: "+y);
});
});
如果您不想使用 jQuery，请尝试使用
window.addEventListener('load', (event) => {
let img = document.querySelector('img')
img.addEventListener(
"click",
function(event) {
var x = event.pageX - this.offsetLeft;
var y = event.pageY - this.offsetTop;
alert("X Coordinate: " + x + " Y Coordinate: " + y);
});
});