Css Image properties

[gbrain]

as this is a more general question I thought I would post here.


Can any developers help me out on a small problem

I am developing a small app to help with a game. Basicaly I have two images a main image that is of a large size sitting in a layer. A second image, which when a user clicks on the main images moves to that location.

I have this working with a layer background image but I cant add hotspots.

I would like to replicated this with have a div with an image. But I cant seem to find the attribute to move the image.

Its hard to explain so I have producted a link to explain.

http://www.dnd-gamer.com/index.php?p..._explorers_map

thanks

Gary

<style type="text/css">
<!--
#Layer1 {
	width:675px;
	height:650px;
	z-index:1;
	background-image: url(./addons/dnl/map/images/mastermap3.jpg);
	background-position: -490px -2142px;
	background-repeat: no-repeat;
}

#mainimage {
	width:675px;
	height:650px;
	z-index:1;
	background-repeat: no-repeat;
	overflow:hidden;
}

-->
</style>


<script language="javascript">
var tempX = 0
var tempY = 0


function getMouseXY(e) {

  tempX = window.event.offsetX
  tempY = window.event.offsetY

  document.Show.MouseX.value = (tempX * -15) + 338
  document.Show.MouseY.value = (tempY * -16.5) + 325
    
  document.getElementById('mainmap').scrollLeft = tempX + 338
  document.getElementById('mainmap').scrollTop = tempY + 325

  document.getElementById('Layer1').style.backgroundPositionX = document.Show.MouseX.value 
  document.getElementById('Layer1').style.backgroundPositionY = document.Show.MouseY.value
}
 

</script>

<table>
<tr><td>this is a layer div with a backgroundImage, by clicking on the smaller map, the backgroundPosition X and Y are set to move it around</td></tr>
  <tr>
     <td><div id="Layer1"></div></td>
  </tr>
    <tr><td>this is a div with a < img / > but what img.value do I need to set to move to the X/Y position</td></tr>
  <tr>
     <td><div id="mainimage"><img id="mainmap" src="./addons/dnl/map/images/mastermap3.jpg" /></img></div>
	 </td>
  </tr>
</table>