ButterFly

by Anton Kolesnikov

HTML

<input id = "mouseX">
<input id = "mouseY">
    <img id = "bf_image" src="http://cool-skripts.narod.ru/butterfly19.gif" />

CSS

#my_body {
    width: 500px;
    height: 500px;
    background: #333;
}
#bf_image {
    position: absolute;
    top: 150px;
    left: 200px;
}

JavaScript

document.onmousemove = mouseMove;

function mouseMove(event){
    event = fixEvent(event);
    document.getElementById('mouseX').value = event.pageX;
    document.getElementById('mouseY').value = event.pageY;
    
    document.getElementById('bf_image').style.cssText = 'position: absolute; top: '+ event.pageX +'px; left: ' + event.pageX + 'px;';
    
    
}
function fixEvent(e) {
	// получить объект событие для IE
	e = e || window.event

	// добавить pageX/pageY для IE
	if ( e.pageX == null && e.clientX != null ) {
		var html = document.documentElement
		var body = document.body
		e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0)
		e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0)
	}

	// добавить which для IE
	if (!e.which && e.button) {
		e.which = e.button & 1 ? 1 : ( e.button & 2 ? 3 : ( e.button & 4 ? 2 : 0 ) )
	}

	return e
}