1.mousemat.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link rel='stylesheet' type = 'text/css' href = 'mousemat.css'>
<script type='text/javascript'>
var cursor = null;
window.onload = function(){
var mat = document.getElementById('mousemat');
mat.onmousemove = mouseObserver;
cursor = document.getElementById('cursor');
}
function mouseObserver(event){
var e = event || window.event;
writeStatus(e);
drawThumbnail(e);
}
function writeStatus(e){
window.status = e.clientX + "," + e.clientY;
}
function drawThumbnail(e){
cursor.style.left = ((e.clientX/5)-2) + "px";
cursor.style.top = ((e.clientY/5)-2) + "px";
}
</script>
</head>
<body>
<div class='mousemat' id='mousemat'></div>
<div class='thumbnail' id='thumbnail'>
<div class = 'cursor' id = 'cursor'></div>
</div>
</body>
</html>
2.mousemat.css
mousemat{
background-color:#ffe0d0;
border:solid maroon 0px;
position:absolute;
margin:0px;
width:500px;
height:500px;
top:50px;
left:50px;
}
.thumbnail{
background-color:#ffe0d0;
border:solid maroon 0px;
position:absolute;
margin:0px;
width:100px;
height:100px;
top:50px;
left:600px;
}
.cursor{
background-color:blue;
position:relative;
height:5px;
width:5px;
}