PHP Code:
<!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 glbIncglbDec;

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.................