After querying the image, we also need to add a function to view the large image, so we wrote a method in js, and then called this method in the onmouseover event of the image, so that when the mouse hovers over the small image, the large image will be displayed automatically.
js code for displaying and hiding large images:
Copy the code code as follows:
<script type="text/javascript">
//Display pictures
function over(imgid,obj,imgbig)
{
//The maximum size displayed in the large image is 4 to 3, 400 300
maxwidth=400;
maxheight=300;
//show
obj.style.display="";
imgbig.src=imgid.src;
//1. The width and height are both exceeded. See who exceeds it more. The one who exceeds it more will be set as the maximum value. The rest of the strategies are according to 2 and 3.
//2. If the width exceeds and the height does not exceed, set the width to the maximum value
//3. If the width does not exceed and the height exceeds, set the height to the maximum value
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;
}
}
//hide picture
function out()
{
document.getElementById('divImage').style.display="none";
}
</script>
The image that displays the small picture and the image that displays the large picture:
Copy the code code as follows:
<img id="img" src="Your image address" onmouseover="over(img,divImage,imgbig);" onmouseout="out()" />
<%--area where large icons are displayed--%>
<div id="divImage" style="display: none; left: 120px;top:5px; position: absolute">
<img id="imgbig" src="~/Images/noImage.gif" />
</div>