图像的Javascript鼠标单击坐标
[英]Javascript mouse click coordinates for image
问题描述
作业说“您的任务是编写一个包含 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>
4 个解决方案
解决方案1
30 已采纳 2016-01-19 01:31:20
您实际上可以为此使用 HTML。 图像标签有一个称为ismap 。
此属性的作用是指定图像是服务器端图像映射的一部分。 单击此类地图时，单击坐标将作为 url 查询字符串发送到服务器。
图像必须嵌套在链接下才能工作。 这是一个例子
<a href="http://www.google.com">
<img src="myimage.png" alt="My Image" ismap">
</a>
如果您不能为此使用图像映射，这里是一个 javascript/jquery 解决方案
首先，您需要在body标签的底部包含 jQuery 库。
<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">
您侦听click事件，并将事件作为参数传入。
event.pageX 属性返回鼠标指针相对于文档左边缘的位置。
解决方案2
15 2019-10-26 04:21:16
地图解决方案只会为您提供客户端像素坐标。 如果您想获取相对于原始图像的像素坐标，您需要具有原始图像高度和宽度的 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
解决方案3
3 2016-01-19 01:48:56
$(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>
解决方案4
0 2021-01-25 21:30:01
小叉子;)
$(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的）
[英]Shrinking an image to the coordinates of a mouse click position? (jQuery)
无论设备大小如何，获取鼠标在图像上单击的坐标（X，Y）
[英]Get Coordinates (X,Y) of mouse click on image regardless of the device size
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.