The code is as shown below.
<HEAD>
<TITLE>Moving Elements from Point to Point</TITLE>
<SCRIPT LANGUAGE="JavaScript" SRC="../include/browser.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function setPosition (x, y)
{
document.aForm.leftVal.value = x;
document.aForm.topVal.value = y;
}
function moveItem (curElem, mTop, mLeft)
{
var dom;
dom = eval (docObj + '.' + curElem + styleObj);
if (mTop > 200) { mTop = 200; }
if (mLeft > 500) { mLeft = 500; }
if (mTop < 150) { mTop = 150; }
if (mLeft < 150) { mLeft = 150; }
dom.top = mTop;
dom.left = mLeft;
setPosition (mLeft, mTop);
}
</SCRIPT>
</HEAD>
<BODY onLoad="setPosition(150, 150);">
<A HREF="../dhtmlidx.html">Dynamic HTML Index</A><BR><BR>
<DIV ID="moveit" STYLE="position: absolute; left: 100px; top: 100px; font: bold 12pt/12pt times; color: red; background-color: pink;">
Have we not heard the chimes at midnight ?
</DIV>
<FORM ACTION="(Empty Reference!)" NAME="aForm" METHOD="get">
x : <INPUT TYPE="text" NAME="leftVal" VALUE=document.aForm.leftVal.value SIZE="3">
y : <INPUT TYPE="text" NAME="topVal" VALUE=document.aForm.topVal.value SIZE="3"><BR><BR>
<INPUT TYPE="button" VALUE="Move" onClick="moveItem('moveit',document.aForm.topVal.value,document.aForm.leftVal.value);">
</FORM>