Question

作业说：“你的任务是写一个包含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>

Answer 1

您实际上可以使用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属性返回鼠标指针相对于文档左边缘的位置。

Answer 2

<img src="img/sample.gif" />

<p id="img_coordinate"></p>

HTML

{{1}}

Answer 3

地图解决方案将仅为您提供客户端像素坐标。如果要获取相对于原始图像的像素坐标，则需要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

Answer 4

小叉子;)

 $(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);

  });
});

Javascript鼠标单击图像坐标

4 个答案: