Show the mouse coordinates when the mouse is moved over the yellow div. Coordinates are relative to the window which in this case is the iframe. : Event Mouse « jQuery « JavaScript DHTML






  1. JavaScript DHTML
  2. jQuery
  3. Event Mouse

Show the mouse coordinates when the mouse is moved over the yellow div. Coordinates are relative to the window which in this case is the iframe.

  


<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("div").mousemove(function(e){
              var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
              var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
              $("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);
              $("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);
            });




        });
    </script>

  </head>
  <body>
    <body>
         <p>   
            <span>Move the mouse over the div.</span>
            <span>&nbsp;</span>
          </p>
          <div>asdf</div>
    </body>
</html>








Related examples in the same category

1.Mouse enter event
2.Mouse leave event
3.Mouse down event
4.Mouse enter
5.Cascaded Mouse leave event
6.Mouse out event
7.Mouse over event
8.Mouse over action
9.Mouse up event
10.mouseover event triggering
11.mouseenter event triggering
12.mouseleave event triggering
13.mouseout(fn) event fires when mouse is moved away from an element.
14.mousemove(fn) event fires when mouse is moved
15.mousedown(fn) event fires when the pointing device button is pressed over an element.
16.Show texts when mouseup and mousedown event triggering.
17.Bounced menu