llanitedave
05-26-2004, 09:51 PM
I have a script -- a skeleton, actually, that clones an image in a loop and copies it in various locations on the screen, creating a "trail effect". At this point, user fields decide how to offset each clone from the next. I have other fields that show the coordinates of the latest paste.
My puzzle is this: The coordinates displayed are relative offsets from the previous image location, even though I've defined the position for each clone as "absolute". Is there a way I can return the coordinates of the image with respect to the window, rather than just the previous location?
Here's my code so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Clone Demo</title>
<script language = "JavaScript" type = "text/javascript">
var topline = 0;
var leftline = 0;
function cloneSun(nodeId, deep) {
for(x=0; x <10; x++) {
var toClone = document.getElementById(nodeId);
var nodeCloned = toClone.cloneNode(deep);
var firstCopy = document.getElementById(nodeId);
addtop = parseInt(document.testform.topDistance.value);
addleft = parseInt(document.testform.leftDistance.value);
firstCopy.appendChild(nodeCloned);
nodeCloned.style.position = "absolute";
nodeCloned.style.top = topline +"px";
nodeCloned.style.left = leftline+"px";
topline = topline + addtop;
leftline = leftline + addleft;
}
document.testform.topPlot.value = topline;
document.testform.leftPlot.value = leftline;
} // end cloneSun
</script>
</head>
<body>
<hr />
<div id = "sunpic"><img src = sunpict.gif style = "position: absolute; top: 300px; left: 400px"></img>
</div>
<hr />
<form name = "testform" id = "testform" style = "position: absolute; top: 400px">
Top Distance: <input type = "text" name = "topDistance" value = ""><br />
Left Distance: <input type = "text" name = "leftDistance" value = ""><br />
<input type = "button" value = "Clone Sun" onclick = "cloneSun('sunpic', true)">
Position Top: <input type = "text" name = "topPlot" id = "topPlot" value = ""><br />
Position Left: <input type = "text" name = "leftPlot" id = "leftPlot" value = ""><br />
</form>
</body>
</html>
My puzzle is this: The coordinates displayed are relative offsets from the previous image location, even though I've defined the position for each clone as "absolute". Is there a way I can return the coordinates of the image with respect to the window, rather than just the previous location?
Here's my code so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Clone Demo</title>
<script language = "JavaScript" type = "text/javascript">
var topline = 0;
var leftline = 0;
function cloneSun(nodeId, deep) {
for(x=0; x <10; x++) {
var toClone = document.getElementById(nodeId);
var nodeCloned = toClone.cloneNode(deep);
var firstCopy = document.getElementById(nodeId);
addtop = parseInt(document.testform.topDistance.value);
addleft = parseInt(document.testform.leftDistance.value);
firstCopy.appendChild(nodeCloned);
nodeCloned.style.position = "absolute";
nodeCloned.style.top = topline +"px";
nodeCloned.style.left = leftline+"px";
topline = topline + addtop;
leftline = leftline + addleft;
}
document.testform.topPlot.value = topline;
document.testform.leftPlot.value = leftline;
} // end cloneSun
</script>
</head>
<body>
<hr />
<div id = "sunpic"><img src = sunpict.gif style = "position: absolute; top: 300px; left: 400px"></img>
</div>
<hr />
<form name = "testform" id = "testform" style = "position: absolute; top: 400px">
Top Distance: <input type = "text" name = "topDistance" value = ""><br />
Left Distance: <input type = "text" name = "leftDistance" value = ""><br />
<input type = "button" value = "Clone Sun" onclick = "cloneSun('sunpic', true)">
Position Top: <input type = "text" name = "topPlot" id = "topPlot" value = ""><br />
Position Left: <input type = "text" name = "leftPlot" id = "leftPlot" value = ""><br />
</form>
</body>
</html>