Javascript 图像的鼠标点击坐标

Question

作业说 "Your task is to write an HTML file that contains JavaScript that will randomly display one of the images above. If the page is refreshed in the browser, you should get another random image." 所以我做到了。

现在显示 "When the user clicks anywhere on the image, display an alert window that shows the X and Y position of where the click occurred relative to the image"。这是我的代码：

<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.

的属性

此属性的作用是指定图像是 server-side 图像映射的一部分。单击此类地图时，单击坐标将作为 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属性returns鼠标指针的位置，相对于文档的左边缘。

Answer 2

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

Answer 3

地图解决方案只会为您提供客户端像素坐标。如果您想获得相对于原始图像的像素坐标，您需要具有原始图像高度和宽度的 naturalHeight 和 naturalWidth 信息。

代码：

 // 
  document.getElementById(imageid).addEventListener('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 );
  });

$(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 图像的鼠标点击坐标

Javascript mouse click coordinates for image

html

javascript

image

mouseclick-event