#ShowBigImgDiv{position:Absolute;Z-index:10001;Display:None;cursor:Pointer;}#FullScreenDiv{position:Absolute;Z-index:10000;Display:None;Background-color:#919191;Filter:Alpha (OPACITY=50);Opacity:0.5;cursor:Pointer;}
<DivID= "Fullscreendiv"onclick= "Backfullscreenhidde ()"title= "Click to zoom Out"></Div><DivID= "Showbigimgdiv"onclick= "Backfullscreenhidde ()"title= "Click to zoom Out"></Div><imgonclick= "Backfullscreen (this.src)"ID= "Pic"alt= "Identity card"src= "<%=rootpath%>/user/tocardimg?code=${user.f16}"Height= "100px"width= "200px">
functionBackfullscreen () {varBigimgurl = document.getElementById ("pic"). getattribute ("src")); varFullscreendiv = document.getElementById ("Fullscreendiv"); FullScreenDiv.style.width= Document.body.clientWidth + "px"; FullScreenDiv.style.height= Document.body.clientHeight + "px"; FullScreenDiv.style.display= "Block"; varShowbigimgdiv = document.getElementById ("Showbigimgdiv"); varshowbigimgdivposition; ShowBigImgDiv.style.display= "Block"; Showbigimgdiv.innerhtml= "; Showbigimgdivposition=Document.documentElement.scrollTop; if(showbigimgdivposition = = 0 | | Showbigimgdivposition = = "") {showbigimgdivposition=Document.body.scrollTop; } ShowBigImgDiv.style.top= Showbigimgdivposition + ((window.screen.height-showbigimgdiv.clientheight)/2-170) + "px"; ShowBigImgDiv.style.left= (window.screen.width-showbigimgdiv.clientwidth)/2-90 + "px";}functionBackfullscreenhidde () {document.getElementById ("Showbigimgdiv"). Style.display = "None"; document.getElementById ("Fullscreendiv"). Style.display = "None";}
Simple implementation of the zoom function of the image
Simple implementation of image scaling via JS