Selection and Display Help

[BillyBoB]

I am creating a Widget Creator and when you goto this site you need to be able to look at a different site and select parts from it by scrolling over them and clicking. Example of this script is: http://grid.orch8.net/clippings/grab you may need to login.

 

For the display I have a function made up but it doesn't work quite right. If you look: http://dreamshowstudios.net/development/widgetcreator/createwidget.php and select all feature with 376 x 216. You may place them but what I'm looking at is when you press done it is supposed to loop through all the items and display their x and y.

 

I couldn't find where to start with the code for the selector.

The code for the Display is:

function cArray() {
alert('A');
for(t in part) {
	var curitem = document.getElementById(part[t]);
	var pos = findPos(curitem);
	document.write(part[t] + ' - ' + pos[0] + ' - ' + pos[1] + '<br/>');
	curitem = '';pos = '';
}
}

function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
	do {
		curleft += obj.offsetLeft;
		curtop += obj.offsetTop;
	} while (obj = obj.offsetParent);
}
return [curleft,curtop];
}

 

With the array being created in php:

<?php
$widgets2 = $_POST['widgets'];
print "<script type=\"text/javascript\">part = new Array();";
foreach($widgets2 as $w => $name) {
 print "part.push(\"$name\" );";
}
print "</script>";
echo("<div style=\"position: absolute; width: $_POST[width]px; height: $_POST[height]px; border: 1px solid #0078fd;\"></div><img src=\"images/done.jpg\" onmousedown=\"cArray();\" alt=\"done\" style=\"position: absolute; top: $height; left: $width;\" />");
?>