<html> <head> <title></title> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <style type = "text/css"> #demo img { width:90px;height:90px; border:5px solid #f4f4f4; } #enlarge_img { position:absolute; display:none; z-index:999; border:5px solid #f4f4f4; } </style> </head> <body> <div id = "demo"> <img src = "1.jpg" /><img src = "2.jpg" /><img src = "4.jpg" /> </div> <div id = "enlarge_img"></div> <script type = "text/javascript"> var demo = document.getElementById("demo"); var gg = demo.getElementsByTagName("img"); var ei = document.getElementById("enlarge_img"); for(i = 0;i < gg.length;i++) { var ts = gg[i]; ts.onmouseover = function(event){ event = event||window.event; ei.style.display = "block"; ei.innerHTML = '<img src = "'+this.src+'" />'; ei.style.top = document.body.scrollTop+event.clientY+10+"px"; ei.style.left = document.body.scrollLeft+event.clientX+10+"px"; } ts.onmouseout = function(){ ei.innerHTML = ""; ei.style.display = "none"; } ts.onclick = function(){window.open(this.src);} } </script> </body> </html>