Untitled

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>cdv2</title>
   </head>
<body>
<script type="text/javascript" src="wz_dragdrop.js"></script>
<script type="text/javascript">

var canvasObjects =
					{
						textObject:
						{
						},
						imageObject:
						{
						}
					}

function loadImg(imageName)
{
	i = Math.round(Math.random());

	if(i == 1)
		imageName = "http://image.gsfc.nasa.gov/image/image_launch_a5.jpg";
	else
		imageName = "http://www.izview.com/shots/eye_512.jpg";

	newFrontImg = new Image();


	frontImgtd = document.getElementById('frontImgtd');

	newFrontImg = document.getElementById('frontImgSrc');
	if(newFrontImg)
	{
		newFrontImg.parentNode.removeChild(newFrontImg);
		newFrontImg = null;
	}

	newFrontImg = document.createElement('img');
	newFrontImg.setAttribute("id", "frontImgSrc");
	newFrontImg.src = imageName;
	newFrontImg.setAttribute("width", newFrontImg.width);
	newFrontImg.setAttribute("height", newFrontImg.height);

	frontImgtd.appendChild(newFrontImg);
}

function addText(objectId, x, y, str)
{
	canvas = document.getElementById('designArea');

	field1X = document.getElementById('field1X');
	field1Y = document.getElementById('field1Y');
	//if our object is not defined, yet make it so
	if(objectId == undefined)
	{
		objectId = document.createElement('span');
	}
	objectId.appendChild(document.createTextNode(str));
	objectId.style.position = 'absolute';
	objectId.style.left = field1X.value;
	objectId.style.top = field1Y.value;

	canvas.appendChild(objectId);
}

function alertValues()
{
	//img = document.getElementById('frontImgSrc');
	//alert("Image Width is: "+img.width+" Height is: "+img.height);
	SET_DHTML("testImage");
}

</script>

<table>

<tr>
	<td>Field 1:</td>
	<td><input type="text" name="field1" id="field1" value="" onkeyup="javascript:addText(canvasObjects.textObject.field1, 500, 500, this.value)"/></td>
</tr>
<tr>
	<td>X:</td>
	<td><input type="text" name="field1X" id="field1X" value="55"/></td>
</tr>
<tr>

	<td>Y:</td>
	<td><input type="text" name="field1Y" id="field1Y" value="55"/></td>
</tr>
<tr>
	<td><input type="button" name="setimage" value="Update Image" onclick="javascript:loadImg('http://www.overnightprints.de/img/nb/de_f421e7b0a04417_full.jpg');"/></td>
	<td><input type="button" name="getValue" value="getValues" onclick="javascript:alertValues()"/></td>
</tr>
</table>

<p><img src="http://image.gsfc.nasa.gov/image/image_launch_a5.jpg" width="1042" height="676" id="testImage" alt="testimage"/></p>


<div id="designArea">
	<table>
	<tr>
		<td id="frontImgtd"></td>
	</tr>
	</table>
</div>

</body>
</html>