var mDown = false; var offsetX=0; var offsetY=0; function init() { document.onmousedown = captureMouseDown; document.onmousemove = captureMouseMove; document.onmouseup = captureMouseUp; document.getElementById("marker").onmousedown = captureOffset; document.getElementById("marker").style.top = "0px"; document.getElementById("marker").style.left = "0px"; }
function captureOffset(e) { x = parseInt(document.getElementById("marker").style.left); y = parseInt(document.getElementById("marker").style.top); if(document.all) { offsetX=window.event.clientX - x; offsetY=window.event.clientY - y; } else { offsetX = e.pageX - x; offsetY = e.pageY - y; } }
function captureMouseDown() { mDown=true; }
function captureMouseUp() { mDown = false; }
function captureMouseMove(e) { if(!mDown)return; x = document.all?window.event.clientX - offsetX:e.pageX - offsetX; y = document.all?window.event.clientY - offsetY:e.pageY - offsetY; if(x<=-1 || x>=175 || y<=-1 || y >= 105)return; document.getElementById("marker").style.left = x + "px"; document.getElementById("marker").style.top = y + "px";
x2 = parseInt(document.getElementById("marker").style.left); y2 = parseInt(document.getElementById("marker").style.top); x2 = (x2 - (x2*2))*2; y2 = (y2 - (y2*2))*2; document.getElementById("largeImage").style.backgroundPosition = x2 + "px " + y2 + "px"; }
|