YenTheFirst · February 8, 2013 00:53
diff --git a/index.html b/index.html
 <html>
        <head>
                <style type="text/css">
                        #over{
                                position: absolute;
                                left: 20;
                        }
                </style>

                <script type="text/javascript">
                        window.onload = function() {
                                base = document.getElementById('base');
                                over = document.getElementById('over');
                                ev_types = ['onclick', 'onmousemove', 'onmouseover', 'onmouseout'];

                                generic_mouse_event = function(e) {
                                        console.log(this.id,'got mouse event',e.type);
                                }

                                covered_mouse_element = undefined;
                                covering_event = function(e) {
                                        this.hidden = true;
                                        new_target = document.elementFromPoint(e.x,e.y);
                                        this.hidden = false;

                                        new_e = document.createEvent("MouseEvents");
                                        new_e.initMouseEvent(e.type,e.bubbles,e.cancelable,e.view,e.detail,e.screenX,e.screenY,e.clientX,e.clientY,e.ctrlKey,e.altKey,e.shiftKey,e.metaKey,e.button,e.relatedTarget);
                                        //if we're a harder move/in/out event...
                                        if (e.type != 'mouseclick'){
                                                if (typeof(covered_mouse_element) != 'undefined' && covered_mouse_element === new_target) {
                                                        //we're just moving within the current registered
                                                        new_e.type = 'mousemove';
                                                }
                                                if (typeof(covered_mouse_element) != 'undefined' && !(covered_mouse_element === new_target)) {
                                                        //we've left our last registered element. send it a mouseout event, and deregister it
                                                        mouse_out = document.createEvent("MouseEvents");
                                                        mouse_out.initMouseEvent('mouseout',e.bubbles,e.cancelable,e.view,e.detail,e.screenX,e.screenY,e.clientX,e.clientY,e.ctrlKey,e.altKey,e.shiftKey,e.metaKey,e.button,e.relatedTarget);
                                                        covered_mouse_element.dispatchEvent(mouse_out);
                                                        covered_mouse_element = undefined;
                                                }
                                                if (typeof(covered_mouse_element) == 'undefined') {
                                                        //we don't have a currently registered element, so we're mousing in to a new one
                                                        new_e.type = 'mouseover';
                                                        //and register it
                                                        covered_mouse_element = new_target;
                                                }
                                        }
                                        new_target.dispatchEvent(new_e);
                                        e.preventDefault();
                                }

                                ev_types.forEach(function(ev) {
                                        base[ev] = generic_mouse_event;
                                        over[ev] = covering_event;
                                });

                        }
                </script>
        </head>
        <body>
                <img src='http://placekitten.com/512/256' id='base'>
                <img src='http://placekitten.com/256/256' id='over'>
        </body>
 </html>
	<html>
	<head>
	<style type="text/css">
	#over{
	position: absolute;
	left: 20;
	}
	</style>

	<script type="text/javascript">
	window.onload = function() {
	base = document.getElementById('base');
	over = document.getElementById('over');
	ev_types = ['onclick', 'onmousemove', 'onmouseover', 'onmouseout'];

	generic_mouse_event = function(e) {
	console.log(this.id,'got mouse event',e.type);
	}

	covered_mouse_element = undefined;
	covering_event = function(e) {
	this.hidden = true;
	new_target = document.elementFromPoint(e.x,e.y);
	this.hidden = false;

	new_e = document.createEvent("MouseEvents");
	new_e.initMouseEvent(e.type,e.bubbles,e.cancelable,e.view,e.detail,e.screenX,e.screenY,e.clientX,e.clientY,e.ctrlKey,e.altKey,e.shiftKey,e.metaKey,e.button,e.relatedTarget);
	//if we're a harder move/in/out event...
	if (e.type != 'mouseclick'){
	if (typeof(covered_mouse_element) != 'undefined' && covered_mouse_element === new_target) {
	//we're just moving within the current registered
	new_e.type = 'mousemove';
	}
	if (typeof(covered_mouse_element) != 'undefined' && !(covered_mouse_element === new_target)) {
	//we've left our last registered element. send it a mouseout event, and deregister it
	mouse_out = document.createEvent("MouseEvents");
	mouse_out.initMouseEvent('mouseout',e.bubbles,e.cancelable,e.view,e.detail,e.screenX,e.screenY,e.clientX,e.clientY,e.ctrlKey,e.altKey,e.shiftKey,e.metaKey,e.button,e.relatedTarget);
	covered_mouse_element.dispatchEvent(mouse_out);
	covered_mouse_element = undefined;
	}
	if (typeof(covered_mouse_element) == 'undefined') {
	//we don't have a currently registered element, so we're mousing in to a new one
	new_e.type = 'mouseover';
	//and register it
	covered_mouse_element = new_target;
	}
	}
	new_target.dispatchEvent(new_e);
	e.preventDefault();
	}

	ev_types.forEach(function(ev) {
	base[ev] = generic_mouse_event;
	over[ev] = covering_event;
	});

	}
	</script>
	</head>
	<body>
	<img src='http://placekitten.com/512/256' id='base'>
	<img src='http://placekitten.com/256/256' id='over'>
	</body>
	</html>