On DIV tag

sribachana

I have an image inside a DIV tag.When i click the mouse in a IE browser,at the particular position of mouse click,i need to display the DIV tag's image. I have captured the coordinates of the mouse click. HOw to set the X,Y coordinates to the image i have taken inside the DIV tag using javascript.

Mike Ellison

You can declare your div for absolute positioning:

div {position: absolute; top: 100px; left: 100px;}

and then change its position with something like this:

var e = document.getElementById("myDiv");
e.style.left = 110;
e.style.top = 110;

Mike Ellison

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&