1.EventRouter.js
/**
* @author user
*/
var jsEvent = new Array();
jsEvent.EventRouter = function(el,eventType){
this.lsnrs = new Array();
this.el = el;
el.eventRouter = this;
el[eventType] = jsEvent.EventRouter.callback;
};
jsEvent.EventRouter.prototype.addListener = function(lsnr){
this.lsnrs.append(lsnr,true);
} ;
jsEvent.EventRouter.prototype.notify = function(e){
var lsnrs = this.lsnrs;
for(var i=0;i<lsnrs.length;i++){
var lsnr = lsnrs[i];
lsnr.call(this,e);
}
};
jsEvent.EventRouter.callback=function(event){
var e = event || window.event;
var router = this.eventRouter;
router.notify(e);
};
Array.prototype.append = function(obj,nodup){
if(nodup){
this[this.length]=obj;
}
};
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;
}
3.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' src = 'EventRouter.js'></script>
<script type='text/javascript'>
var cursor = null;
window.onload = function(){
var mat = document.getElementById('mousemat');
cursor = document.getElementById('cursor');
var mouseRouter = new jsEvent.EventRouter(mat,"onmousemove");
//var mouseRouter = new jsEvent.EventRouter(mat,"onclick");
mouseRouter.addListener(writeStatus);
mouseRouter.addListener(drawThumbnail);
};
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>