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................. Quote 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
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.