Js method to upload the picture after view a large picture

After the image query, we also need to add a function to view the large image, so we write a method with js, and then call this method in the onmouseover event of the image, so that when the mouse hovers over the small image, the large image will be automatically displayed.

Js code to show and hide large images:

 
<script type="text/javascript"> 
//Display images
function over(imgid,obj,imgbig) 
{ 
//The large picture shows the maximum size of 4 to 3 for the size of 400 to 300
maxwidth=400; 
maxheight=300; 

// According to  
obj.style.display=""; 
imgbig.src=imgid.src; 


//1, the width and height are exceeded, see who exceeds more, who exceeds more will be set as the maximum, the rest of the strategy according to 2, 3
//2. If the width exceeds and the height does not exceed, set the width as the maximum
//3. If the width is not exceeded and the height is exceeded, set the height as the 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"; 
} 
</script> 

Image for displaying small image and image for displaying large image:

 
<img id="img" src=" Your picture address " onmouseover="over(img,divImage,imgbig);" onmouseout="out()" width="100" alt="" height="100" /> 

<%-- Shows the area of the large icon --%> 
<div id="divImage" style="display: none; left: 120px;top:5px; position: absolute"> 
<img id="imgbig" src="~/Images/noImage.gif" alt=" preview " /> 
</div>