uses JS to write a method, and then call this method in the image onmouseover event, so that when the mouse hovers over the small image, its large image will automatically display
The picture query out, but also need to add a view of the large image function, and then use JS to write a method, and then in the image of the onmouseover event call this method, so that in the mouse hovering over the small picture, its large picture will automatically display. Show large and hidden large image of the JS code: code as follows: <script type= "Text/javascript" > //Show picture function over (imgid , Obj,imgbig) { //Large picture shows maximum size of 4:3 300 maxwidth=400; maxheight=300; //show Obj.style.display= "" "; imgbig.src=imgid.src; //1, Width and height are more than, to see who more than, who more than the number who set to the maximum, the remaining strategy according to 2, 3 //2, if width exceeds and high no super, set width to maximum //3, if width does not exceed and high exceeds, set high to maximum if (img.width>maxwidth&& Img.height>maxheight) { pare= (img.width-maxwidth)-(Img.height-maxheight); if (pare>=0) img.width=maxwidth; else img.height=maxheight; } else if (img.width>maxwidth& &img.height<=maxheight) { img.width=maxwidth; } else if (img.width<=maxwidth& &img.height>maxheight) { img.height=maxheight; } } //Hidden pictures function out () { document.getElementById (' divimage ') style.display= ' None '; } > shows the image of the small image and the image: code to display the larger image as follows: <img id= "img" src= "Your picture address" onmouseover= "Over (Img,divimage, Imgbig), "onmouseout=" Out () "width=" alt= "height="/> <%----%> ID of the area <div display large Icons = "Divimage" style= "Display:none"; left:120px;top:5px; Position:absolute "> <img id=" Imgbig "src=" ~/images/noimage.gif "alt=" Preview "/> </div>