<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <style type="text/css"> #tip{ position:absolute; background:#ffc; color:#333; font:14px/1.5 arial;} </style> <div id="tip"> <span id="tip-left"></span> | <span id="tip-top"></span> </div> <script> document.onmousemove = function (e) { var posx = 0, posy = 0, e = e || window.event, get = function (id) { return document.getElementById(id); }, tip = get('tip'), tipLeft = get('tip-left'), tipTop = get('tip-top'); if (e.pageX || e.pageY) { posx = e.pageX; posy = e.pageY; } else if (e.clientX || e.clientY) { posx = e.clientX + document.documentElement.scrollLeft + document.body.scrollLeft; posy = e.clientY + document.documentElement.scrollTop + document.body.scrollTop; }; tip.style.top = +posy + 15 + 'px'; tip.style.left = +posx + 15 + 'px'; tipLeft.innerHTML = 'Left: ' + posx; tipTop.innerHTML = 'Top: ' + posy; }; </script> </body> </html>