How I can overlap one image on another on zoom

JavaScript
1 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="date" content="2003-12-02T09:54:03+08:00" />
<meta http-equiv="imagetoolbar" content="no" />

<title>Dynamically enlarge image on mouseover and mouseout</title>

<style type="text/css">
body {margin:64px;}

#apDiv3 {
position:absolute;
left:188px;
top:116px;
width:100px;
height:75px;
z-index:1;
}
#apDiv4 {
position:absolute;
left:387px;
top:113px;
width:100px;
height:75px;
z-index:2;
}
</style>


<script type="text/javascript">
// <![CDATA[
var glbInc, glbDec;

function decreaseSizeImage(idname) // will get back to its normal default size
{
var id_name=idname;
//var image_name=imagename;
if(glbInc != null) {clearTimeout(glbInc); glbInc = null;};
if (document.getElementById(id_name).height > 100)
{
document.getElementById(id_name).height -= 30;
document.getElementById(id_name).width -= 40;
glbDec = setTimeout("decreaseSizeImage('"+id_name+"')", 32);
};
}

function increaseSizeImage(idname)
{
var id_name=idname;
//var image_name=imagename;
if(glbDec != null) {clearTimeout(glbDec); glbDec = null;};
if (document.getElementById(id_name).height < 216)
{
document.getElementById(id_name).height += 30;
document.getElementById(id_name).width += 40;
glbInc = setTimeout("increaseSizeImage('"+id_name+"')", 32);
};
}
// ]]>
</script>

</head>

<body>
<div id="apDiv3"><a href="#" onmouseover="increaseSizeImage('image2');"
onmouseout="decreaseSizeImage('image2');"><img id="image2"
src="ganesha.jpg" width="100" height="75"  /></a></div>
<p>&nbsp;</p>
<div id="apDiv4"><a href="#" onmouseover="increaseSizeImage('image1');"
onmouseout="decreaseSizeImage('image1');"><img id="image1"
src="sai baba.jpg"
width="100" height="75" alt="Krusty is helpless" /></a></div>
<p>&nbsp;</p>

<p id="validation">&nbsp;</p>

</body></html>

HI frds…
I have two images which zooms on mouse over but zooming image don’t overlap the neighbour image. It means zooming image and neighbour both are visible…
I want when one image zooms it overlaps the neighbour image so that only zooming image is visible…
Any one???/
Plz help…