[Racine des codes] [Page précédente]

/Html JavaSript/getMouseXY.html

<script type="text/javascript">
function getMouseXY(e) {
  // retourne X et Y de souris sous la forme d'un tableau [X, Y]
  if(!e)e = window.event; // not standard for IE
  if(!e.pageX){ // add to IE standards property :
    e.pageX = e.clientX+document.body.scrollLeft;
    e.pageY = e.clientY+document.body.scrollTop;
  }
  return [e.pageX, e.pageY];
}
function popBox(posx, posy, boxInnerHTML) {
  var ttp = document.getElementById("tooltip");
  ttp.style.left = posx + "px";
  ttp.style.top = posy + "px";
  ttp.innerHTML = boxInnerHTML;
}
</script>

<div style="overflow:auto;height:200px;border:1px solid blue">
  div overflow:auto (=&gt;scroll)
  <br><br><br><br><br>
  <div onclick="var XY=getMouseXY(event); var xx=XY.shift(), yy=XY.shift(); popBox(xx, yy, '('+xx+', '+yy+')');" style="background-color:yellow;width:300px;margin-left:15em;padding:1em">
  Click me<br> Click me<br> Click me<br>
  Click me<br> Click me<br> Click me<br>
  Click me<br> Click me<br> Click me<br>
  </div>
  <br><br><br><br><br><br><br><br><br>for have a scrollbar
</div>

<div id="tooltip" style="border:1px solid #000;background-color:red;position:absolute;">(x, y)</div>


[edit]