Hi Guys,
Im trying to write some code that when the user moves the mouse over a shrunk down image, another image will then display the selected portion of the shrunk image in the proper size.
For example, I have the code below which more or less does the job, but for the life of me, I can't get the coordinates to match.
I would very much appreciate if someone could show me where I am going wrong
Im trying to write some code that when the user moves the mouse over a shrunk down image, another image will then display the selected portion of the shrunk image in the proper size.
For example, I have the code below which more or less does the job, but for the life of me, I can't get the coordinates to match.
Code:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
<style type="text/css">
#largeImage {
position:relative;
width:400px;
height:180px;
border:1px solid #000000;
background-image:url("bgimage.jpg");
background-repeat:no-repeat;
background-position:0px 0px;
}
#smallImage {
position:relative;
border:1px solid #000000;
margin-top:5px;
width:250px;
height:155px;
}
#marker {
position:absolute;
top:0px;
left:0px;
border:1px solid #FF0000;
width:55px;
height:55px;
cursor:pointer;
background-image:url("tp.gif");
}
h1 {
font-size:12pt;
font-family:arial;
font-weight:bold;
margin-bottom:5px;
}
hr {
color:#000000;
background-color:#000000;
height:1px;
width:100%;
border-style:none;
}
#nfo {
font-size:9px;
font-family:verdana;
margin:5px;
}
</style>
<script language="javascript" type="text/javascript">
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>=250 || y<=-1 || y >= 250)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";
}
</script>
</head>
<body onload="init();">
<h1>Image Navigator</h1>
<hr />
<div id="nfo">
Click and drag the red square on the bottom photo to navigate the zoomed image, much like you would in Photoshop.
This works by sliding the background-image of the #largeImage DIV element around using background-position to correspond with the coordinates of the
#marker DIV.
</div>
<div id="largeImage"></div>
<div id="smallImage">
<img src="bgimage.jpg" height="500" width="500" />
<div id="marker"></div>
</div>
</body>I would very much appreciate if someone could show me where I am going wrong