Javascript鼠标单击图像的坐标

克里斯蒂娜·彼得罗夫斯基(Christina Petrovski)

作业说:“您的任务是编写一个包含JavaScript的HTML文件,该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。image标签具有称为的属性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属性返回鼠标指针相对于文档左边缘的位置。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章