Chr*_*ski 3 html javascript image mouseclick-event
作业说:"你的任务是写一个包含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>Wol*_*ahl 14
地图解决方案只会为您提供客户端像素坐标。如果您想获取相对于原始图像的像素坐标，您需要具有原始图像高度和宽度的 naturalHeight 和 naturalWidth 信息。
代码：
// /sf/ask/2440694651/
document.getElementById(imageid).addEventListener('click', function (event) {
// /sf/answers/20211201/
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 );
});
// 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 );
});
});例子
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
Ric*_*ton 11
您实际上可以使用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属性返回鼠标指针相对于文档左边缘的位置.
| 归档时间： |
|
| 查看次数： |
16789 次 |
| 最近记录： |