Full version: jsB@nk » Image » Image viewer » Dragable magnifying glass for images
URL: https://www.javascriptbank.com/dragable-magnifying-glass-for-images.html
Cross-browser magnifying glass script combining drag'n'drop methods with image-clip-functions. Very useful if you have to present maps, town plans, large images and blueprints.
Full version: jsB@nk » Image » Image viewer » Dragable magnifying glass for images
URL: https://www.javascriptbank.com/dragable-magnifying-glass-for-images.html
<STYLE type=text/css>#mglass {LEFT: -2000px; POSITION: absolute; TOP: 50px}#thumb {LEFT: -2000px; POSITION: absolute; TOP: 50px}#large {LEFT: -2000px; POSITION: absolute; TOP: 50px}#framegif {LEFT: -2000px; POSITION: absolute; TOP: 50px}.baseline {COLOR: #000000; FONT-FAMILY: Arial; FONT-SIZE: 9pt; LEFT: 50px; POSITION: absolute; TOP: 260px}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT language=JavaScript><!-- Beginning of JavaScript -var isNav, isIEvar offsetX, offsetYvar selectedObj var enlargefactor=5var largewidth = 455var largeheight = 523var largeleft = 250var largetop = 30var thumbwidth = Math.floor(largewidth/enlargefactor)var thumbheight = Math.floor(largeheight/enlargefactor)var thumbleft = 50var thumbtop = 30var mglasswidth = 32var mglassheight = 32var mglassleft = 120var mglasstop = 110var difleft= largeleft-thumbleftvar diftop= largetop-thumbtopvar clippointsvar cliptop = (thumbheight-mglassheight)*enlargefactorvar clipbottom = cliptop+(mglassheight*enlargefactor)var clipleft =(thumbwidth-mglasswidth)*enlargefactorvar clipright = clipleft+(mglasswidth*enlargefactor)if (parseInt(navigator.appVersion) >= 4) {if (navigator.appName == "Netscape") {isNav = true} else {isIE = true}}function setZIndex(obj, zOrder) {obj.zIndex = zOrder}function shiftTo(obj, x, y) {if (isNav) {obj.moveTo(x,y)} else {obj.pixelLeft = xobj.pixelTop = y}cliptop = (y-thumbtop)*enlargefactorclipbottom = cliptop+(mglassheight*enlargefactor)clipleft = (x-thumbleft)*enlargefactorclipright = clipleft+(mglasswidth*enlargefactor)if (document.all) {clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"document.all.large.style.posTop=largetop-cliptopdocument.all.large.style.posLeft=largeleft-clipleftdocument.all.large.style.clip=clippoints}if (document.layers) {document.large.top=largetop-cliptopdocument.large.left=largeleft-clipleftdocument.large.clip.left = clipleftdocument.large.clip.right = cliprightdocument.large.clip.top = cliptopdocument.large.clip.bottom = clipbottom}}function setSelectedElem(evt) {if (isNav) {var testObjvar clickX = evt.pageXvar clickY = evt.pageYfor (var i = document.layers.length - 1; i >= 0; i--) {testObj = document.layers[i]if ((clickX > testObj.left) && (clickX < testObj.left + testObj.clip.width) && (clickY > testObj.top) && (clickY < testObj.top + testObj.clip.height)) {selectedObj = testObjsetZIndex(selectedObj, 100)return}}} else {var imgObj = window.event.srcElementif (imgObj.parentElement.id.indexOf("mglass") != -1) {selectedObj = imgObj.parentElement.stylesetZIndex(selectedObj,100)return}}selectedObj = nullreturn}function dragIt(evt) {if (selectedObj) {if (isNav) {shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY))} else {shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY))return false}}}function engage(evt) {setSelectedElem(evt)if (selectedObj) {if (isNav) {offsetX = evt.pageX - selectedObj.leftoffsetY = evt.pageY - selectedObj.top} else {offsetX = window.event.offsetXoffsetY = window.event.offsetY}}return false}function release(evt) {if (selectedObj) {setZIndex(selectedObj, 0)selectedObj = null}}function setNavEventCapture() {if (isNav) {document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)}}function init() {if (document.layers) {document.large.left=largeleftdocument.large.top=largetopdocument.framegif.left=largeleft-3document.framegif.top=largetop-3document.thumb.left=thumbleftdocument.thumb.top=thumbtopdocument.mglass.left=mglassleftdocument.mglass.top=mglasstopdocument.large.clip.left = 0document.large.clip.right = 0document.large.clip.top = 0document.large.clip.bottom = 0setNavEventCapture()}if (document.all) {document.all.large.style.posLeft=largeleftdocument.all.large.style.posTop=largetopdocument.all.framegif.style.posLeft=largeleft-3document.all.framegif.style.posTop=largetop-3document.all.thumb.style.posLeft=thumbleftdocument.all.thumb.style.posTop=thumbtopdocument.all.mglass.style.posLeft=mglassleftdocument.all.mglass.style.posTop=mglasstopdocument.all.large.style.clip="rect(0 0 0 0)"}document.onmousedown = engagedocument.onmousemove = dragItdocument.onmouseup = release}// - End of JavaScript - --></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY onload=init()><DIV id=thumb><IMG name=thumbpic src="pic191.jpg" width=100 height=100></DIV><DIV id=framegif><IMG name=framepic src=""></DIV><DIV id=large><IMG name=largepic src="pic191.jpg"></DIV><DIV id=mglass><IMG name=mglasspic src="mglass.gif" width="50" height="50"></DIV></BODY><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
http://javascriptbank.com/javascript/image/mglass.gifhttp://javascriptbank.com/javascript/image/pic191.jpg