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?page=dnl_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.background PositionX = document.Show.MouseX.value
document.getElementById('Layer1').style.background PositionY = 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>