Here's a more fleshed-out example:
<html>
<head>
<style>
div.myDiv {font-size: 10pt; font-family: Tahoma;
border: 1px solid #999999;
background-color: yellow;
width: 18px; height: 18px;
position: absolute;
text-align: center;
vertical-align: center;
font-weight: bold;
color: darkBlue;
}
</style>
<script>
function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
curleft = obj.offsetLeft
curtop = obj.offsetTop
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft
curtop += obj.offsetTop
}
}
return \[curleft,curtop\];
}
function MoveDiv(x, y)
{
var div = document.getElementById("MyDiv");
div.style.left = x;
div.style.top = y;
}
function MoveToButton(btn)
{
var pos = findPos(btn);
var width = btn.offsetWidth;
var height = btn.offsetHeight;
var x = (width / 2) + pos\[0\];
var y = (height - 6) + pos\[1\];
MoveDiv(x,y);
}
</script>
</head>
<body>
<h3>Testing a client-side element move</h3>
<p>Div defined below:</p>
<div id="MyDiv" class="myDiv">
@
</div>
<br /><br />
<hr />
<input type="button" value="Click to move it here"
o n c l i c k = "MoveToButton(this);"
/>
<input type="button" value="Click to move it here"
o n c l i c k = "MoveToButton(this);"
/>
<input type="button" value="Click to move it here"
o n c l i c k = "MoveToButton(this);"
/>
<br /><br />
<input type="button" value="Click to move it here"
o n c l i c k = "MoveToButton(this);"
/>
<input type="button" value="Click to move it here"
o n c l i c k = "MoveToButton(this);"
/>
<input type="button" value="Click to move it here"
o n c l i c k = "MoveToButton(this);"
/>
<br /><br /><br /><br />
<a href="#";
o n m o u s e o v e r = "MoveToButton(this);"
>MouseOver move&
