JS Write method to achieve the upload image after viewing the larger image

Source: Internet
Author: User

  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> 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.