Overlapping Containers

i'm trying to overlap a div tag with an img tag during an onmouseover event which disappears onmouseout.

i have made it so that the image hides and shows correctly but i cannot retrieve the top , left, bottom, right positions of the div tag to position it

i have tried a few things but this is the one i think i was closest with, if anybody could help me i would be very greatful

<script type="text/javascript">


function onload()


{

	

	top = document.getElementById("firstimage").style.top;

	bottom = document.getElementById('firstimage').style.bottom;

	left = document.getElementById('firstimage').style.left;

	right = document.getElementById('firstimage').style.right;

	

	document.getElementById('largerimage').style.top = top;

	document.getElementById('largerimage').style.bottom = bottom;

	document.getElementById('largerimage').style.left = left;

	document.getElementById('largerimage').style.right = right;

	

}


</script>


<body onLoad="onload()">

<style>


img.larger { visibility:hidden }


</style>


<script type="text/javascript">



function show(elmnt)


{


	document.getElementById(elmnt).style.visibility='visible'

	

}


function hide(elmnt)


{


	document.getElementById(elmnt).style.visibility='hidden'

	

}


</script>


<div id="firstimage" style="height:120px ; width:120px ; background-image:url('geckotest1.jpg') ; background-position:center ; z-index:1" onMouseOver="show('largerimage')" onMouseOut="hide('largerimage')">


</div>


<table>

<tr>

<td>

<img style="z-index:2" class="larger" id="largerimage" src="gekkotest1.jpg" />

</td>

</tr>

</table>


</body>

thanks in advance