Forum Moderators: open
<script language="javascript" type="text/javascript">
<!--
isIE = document.all;
function mouseDown(e) {
itemClicked = isIE? event.srcElement : e.target;
if(itemClicked.id == "theLens") {
offsetx = isIE? event.clientX : e.clientX;
offsety = isIE? event.clientY : e.clientY;
nowX = parseInt(itemClicked.style.left);
nowY = parseInt(itemClicked.style.top);
dragEnabled = true;
document.onmousemove = mouseMove;
}
}
function mouseMove(e) {
if(!dragEnabled)
return;
itemClicked.style.left = isIE? nowX + event.clientX - offsetx + "px" : nowX + e.clientX - offsetx + "px";
itemClicked.style.top = isIE? nowY + event.clientY - offsety + "px" : nowY + e.clientY - offsety + "px";
itemLeft = parseInt(itemClicked.style.left) - parseInt(document.getElementById("theSource").style.left);
itemTop = parseInt(itemClicked.style.top) - parseInt(document.getElementById("theSource").style.top);
deltaX = 2 * itemLeft / bigWidth * lensSize;
deltaY = 2 * itemTop / bigWidth * lensSize;
backgroundX = -1 * itemLeft * ratio - deltaX;
backgroundY = -1 * itemTop * ratio - deltaY;
itemClicked.style.backgroundPosition = backgroundX+"px " + backgroundY+"px";
}
document.onmousedown = mouseDown;
document.onmouseup = Function("dragEnabled = false");
var lensSize = 100;
var bigWidth = 600;
var smallWidth = 300;
var ratio = bigWidth / smallWidth;
-->
</script>
<style type="text/css">
<!--
#theSource {
position:absolute;
border: 0px solid #000000;
}
#theLens {
position: absolute;
width: 100px;
height: 100px;
background-color: #FFFFFF;
background: #FFFFFF url(myPicture.jpg) no-repeat;
background-position: 0px 0px;
border: 1px solid #000000;
Drag.init(etheLens, null, 0, 300, 0, 0);
}
#container {
position: absolute;
width: 372px;
height: 251px;
background-color: #FFFFFF;
background-position: 0px 0px;
border: 1px solid #000000;
}
-->
</style>
<body>
<div id="container" style="left:0px; top:0px;">
<div id="theSource" style="left: 0px; top: 0px;">
<img src="myPicture.jpg" width=372 height=250 />
</div>
<div id="theLens" style="left:0px; top:0px;"></div>
</div>
</body>
</html>
Your code is nice and tidy, efficient, and if you wrote it yourself you have a good understanding of maths and logic problems. I'm surprised you couldn't do this yourself?
So, take these 2 lines:
itemClicked.style.left = isIE? nowX + event.clientX - offsetx + "px" : nowX + e.clientX - offsetx + "px";
itemClicked.style.top = isIE? nowY + event.clientY - offsety + "px" : nowY + e.clientY - offsety + "px";
Firstly, tidy it up a bit, and add a little extra room for maths:
var cX = isIE? event.clientX: e.clientX;
var cY = isIE? event.clientY: e.clientY;
var newX = nowX +cX -offsetx;
var newY = nowY +cY -offsety;itemClicked.style.left = newX +"px";
itemClicked.style.top = newY +"px";
Now you have to do something to newX and newY to check that #theLens won't overrun #theSource. Try this:
if( newX < 0) newX = 0; // Assuming you want to limit it to 0 also
if( newY < 0) newY = 0;
if( newX > 272) newX = 272; // 372 -size of the lens
if( newY > 150) newY = 150; // 250 -size of the lens
Assuming this works you can tidy it up as follows:
var newX = Math.min( Math.max( nowX +cX -offsetx, 0), 272);
var newY = Math.min( Math.max( nowY +cY -offsety, 0), 150);
Try that.
