Как я могу отобразить перекрестие курсора с координатами XY при наведении курсора на изображение? - PullRequest
Новая
       19

Как я могу отобразить перекрестие курсора с координатами XY при наведении курсора на изображение?

0 голосов
/ 23 сентября 2011

У меня есть изображение внутри div, на котором пользователи могут щелкнуть.

Есть ли способ отобразить координаты курсора при наведении курсора на это изображение в реальном времени?Я знаю, что для отображения курсора перекрестия необходимо установить тип курсора: cursor: crosshair - но как я могу также отобразить эти координаты?

Ответы [ 4 ]

2 голосов
/ 23 сентября 2011

Попробуйте: 

$(function () {
    $('#hover-img')

    // show the coordinates box on mouseenter
    .bind('mouseenter', function () {
      $('#coordinates').show();
    })

    // hide it on mouseleave
    .bind('mouseleave', function () {
      $('#coordinates').hide();
    })

    // update text and position on mousemove
    .bind('mousemove', function (evt) {
      $('#coordinates').html(
        (evt.pageX - this.offsetLeft) + '/' + (evt.pageY - this.offsetTop)
      ).css({
        left: evt.pageX + 20,
        top: evt.pageY + 20
      })
    });
});

Примечание : см. Демонстрационную версию " для используемых html-элементов.

0 голосов
/ 23 сентября 2011 
<html>
  <head>
    <script type="text/javascript">

    function getAbsoluteOffset(htmlelement) {
      var offset={x:htmlelement.offsetLeft,y:htmlelement.offsetTop};
      while(htmlelement=htmlelement.offsetParent)
      {
        offset.x+=htmlelement.offsetLeft;
        offset.y+=htmlelement.offsetTop;
      }
      return offset;
    }
    function image_onmouseout(ev) {
      document.getElementById("mouseinfo").innerHTML="Mouse outside of image";
    }
    function image_onmousemove(ev) {
      var offset=getAbsoluteOffset(this);
      document.getElementById("mouseinfo").innerHTML=
          "Coordinates in page: (x: "+ev.clientX+",y:"+ev.clientY+")"+
          "<br/>"+
          "Coordinates in image: (x: "+(ev.clientX-offset.x)+",y:"+(ev.clientY-offset.y)+")";
    }
    </script>
  </head>
  <body>
    <div style="width:400px;height:400px;background:red;">
      <img src="image.png"
       onmouseout="image_onmouseout.call(this,event);"
       onmousemove="image_onmousemove.call(this,event);" />
    </div>
    <span id="mouseinfo">Mouse outside of image</span>
  </body>
</html>

пример: http://jsfiddle.net/HWMtc/

0 голосов
/ 23 сентября 2011 
<html>
 <head>
  <script>
     function onMouseOver(Sender,e){
       var x = e.x - Sender.offsetLeft;
       var y = e.y - Sender.offsetTop;
       document.getElementById('coord').innerHTML = x+"-"+y;        
     }
  </script>
 </head>
 <body>
  <img src="image.jpg" onmousemove="onMouseOver(this,event)">
  <span id='coord'></span>
</body>
</html>
0 голосов
/ 23 сентября 2011

С помощью jQuery вы можете сделать: 

<script language="text/javascript">
    $('#your_image').mouseover(function(e){
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        alert("X: " + x + " Y: " + y); 
    });
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...