jQuery
<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.5">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
$("div").mousemove(function(e){
$("#client").html("clientX: " + e.clientX + "<br>clientY: " + e.clientY);
$("#page").html("pageX: " + e.pageX + "<br>pageY: " + e.pageY);
$("#screen").html("screenX: " + e.screenX + "<br>screenY: " + e.screenY);
$("#offset").html("offsetX: " + e.offsetX + "<br>offsetY: " + e.offsetY);
});
});
</script>
<style>
div{
width:198px;
height:198px;
border:1px solid #FFFF00;
background-image:url(img/200x200.png);
-webkit-background-size:198px 198px;
}
</style>
</head>
<body>
<div></div>
<h2>clientX, clientY</h2>
<p id="client"></p>
<h2>pageX, pageY</h2>
<p id="page"></p>
<h2>screenX, screenY</h2>
<p id="screen"></p>
<h2>offsetX, offsetY</h2>
<p id="offset"></p>
</body>
</html>