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