ankit.pandeyc012 Posted March 9, 2011 Share Posted March 9, 2011 <!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> </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> </p> <p id="validation"> </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................. Link to comment https://forums.phpfreaks.com/topic/230069-how-i-can-overlap-one-image-on-another-on-zoom/ Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.