Full version: jsB@nk » Image » Image viewer » Image Sharpener
URL: https://www.javascriptbank.com/image-sharpener.html
New DHTML-technique to highlight specific zones of your images. Uses filter-methods and drag-and-drop-functions. IE5x.
Full version: jsB@nk » Image » Image viewer » Image Sharpener
URL: https://www.javascriptbank.com/image-sharpener.html
<STYLE type=text/css>A {COLOR: #ff0000}A:visited {COLOR: #ff0000}A:active {COLOR: #ff0000}A:hover {COLOR: #ff0000}.baselinestyle {FONT-FAMILY: Verdana; FONT-SIZE: 8pt; LEFT: 10px; POSITION: absolute; TOP: 280px; WIDTH: 240pt}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT language=JavaScript>// Image Sharpener scriptvar isNav, isIEvar offsetX, offsetYvar selectedObj var dragimg_width=64var dragimg_height=64var dragimg_startx=410var dragimg_starty=80var clipLeft=dragimg_startxvar clipTop=dragimg_startyvar clipRight=clipLeft+dragimg_widthvar clipBottom=clipTop+dragimg_heightif (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)document.bgimage.clip.top=ydocument.bgimage.clip.left=xdocument.bgimage.clip.bottom=y+dragimg_heightdocument.bgimage.clip.right=x+dragimg_width}else {clipTop=yclipLeft=xclipBottom=y+dragimg_heightclipRight=x+dragimg_widthdocument.all.bgimage.style.clip="rect("+clipTop+" "+clipRight+" "+clipBottom+" "+clipLeft+")"obj.pixelLeft = xobj.pixelTop = y}}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) && (testObj.name=="picture1")) {selectedObj = testObjsetZIndex(selectedObj, 100)return}}} else {var imgObj = window.event.srcElementif (imgObj.parentElement.id.indexOf("picture") != -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 (isNav) {setNavEventCapture()}document.onmousedown = engagedocument.onmousemove = dragItdocument.onmouseup = releaseif (document.all) {clipTop=dragimg_startyclipLeft=dragimg_startxclipBottom=clipTop+dragimg_heightclipRight=clipLeft+dragimg_widthdocument.all.picture1.style.posLeft=dragimg_startxdocument.all.picture1.style.posTop=dragimg_startydocument.all.bgimage.style.posLeft=0document.all.bgimage.style.posTop=0 document.all.filterimage.style.posLeft=0document.all.filterimage.style.posTop=0 document.all.filterimage.style.filter="alpha(opacity=25) blur(strength=50 add=1)"document.all.bgimage.style.clip="rect("+clipTop+" "+clipRight+" "+clipBottom+" "+clipLeft+")"}if (document.layers) {document.bgimage.clip.left=dragimg_startxdocument.bgimage.clip.right=clipLeft+dragimg_widthdocument.bgimage.clip.top=dragimg_startydocument.bgimage.clip.bottom=clipTop+dragimg_heightdocument.picture1.left=dragimg_startxdocument.picture1.top=dragimg_startydocument.bgimage.left=0document.bgimage.top=0}}// - 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=filterimage style="LEFT: 0px; POSITION: absolute; TOP: -3000px"> <IMG name=filterimg src="logojs.gif" width="580" height="280"></DIV><DIV id=bgimage style="LEFT: 0px; POSITION: absolute; TOP: -3000px"> <IMG name=bgimagpic src="pic191.jpg" width="580" height="280"></DIV><DIV id=picture1 style="LEFT: 0px; POSITION: absolute; TOP: -3000px"> <IMG name=picturePic1 src="dragpic271.gif" width="64" height="64"></DIV><DIV class=baselinestyle id=redirtext><b>Drag square to view</b></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/dragpic271.gif