1.mousemat.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
<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;
}