Smart image resizer - JavaScript Made Easy: Free JavaScripts Tutorials Example Code

WebSiteMadeEasy.net

|

FontsMadeEasy.com

|

RankChecker.net

Submit your Script

Google Search:

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial


Smart image resizer

Use this script and your visitors are able to resize your webimages as easy as a browser-window.


Insert into <HEAD>
<SCRIPT LANGUAGE="JavaScript"> // CREDITS: // Smart image resizer script by Urs Dudli and Peter Gehrig // Copyright (c) 2000 Peter Gehrig and Urs Dudli. All rights reserved. // Permission given to use the script provided that this notice remains as is. // Additional scripts can be found at http://www.24fun.ch. // info@24fun.ch // 1/20/2000 // IMPORTANT: // If you add this script to a script-library or script-archive // you have to add a link to http://www.24fun.ch on the webpage // where the smart image resizer script will be running. // CONFIGURATION: // Copy the two <DIV>-blocks just below the body-tag of this webpage. // Paste them below the body tag of your webpage. // Do not change them!!! // Put the image "grip201.gif" in the same directory as the script. // Configure the following variables: // URL of the image to resize (put the image in the same directory // as the script) var imgsrc="girl201.jpg" // the width and height of the image to resize (pixels) var resizeimg_width=480 var resizeimg_height=280 // the distance of the image to the left margin (pixels) var resizeimg_startx=10 // the distance of the image to the top margin (pixels) var resizeimg_starty=10 // At the beginning the image will be displayed smaller than the original size: // 2 means 2 times smaller, 3 means 3 times smaller, 4 means 4 times smaller and so on. var startsize=4 // No need to change the variables below var gripimg_startx=Math.ceil(resizeimg_width/startsize)+resizeimg_startx-15 var gripimg_starty=Math.ceil(resizeimg_height/startsize)+resizeimg_starty-15 var preloadimg=new Image() preloadimgsrc=imgsrc var isNav, isIE var offsetX, offsetY var selectedObj 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) { if (document.layers) { document.resizeimagediv.document.write("<img src="+imgsrc+" width="+(-resizeimg_startx+x+15)+" height="+(-resizeimg_starty+y+15)+">") document.resizeimagediv.document.close() } document.gripimagediv.left=x document.gripimagediv.top=y } else { resizeimagediv.innerHTML="<img src="+imgsrc+" width="+(-resizeimg_startx+x+15)+" height="+(-resizeimg_starty+y+15)+">" document.all.gripimagediv.style.posLeft=x document.all.gripimagediv.style.posTop=y } } function setSelectedElem(evt) { if (isNav) { var testObj var clickX = evt.pageX var clickY = evt.pageY for (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=="gripimagediv")) { selectedObj = testObj setZIndex(selectedObj, 100) return } } } else { var imgObj = window.event.srcElement if (imgObj.parentElement.id.indexOf("gripimage") != -1) { selectedObj = imgObj.parentElement.style setZIndex(selectedObj,100) return } } selectedObj = null return } 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.left offsetY = evt.pageY - selectedObj.top } else { offsetX = window.event.offsetX offsetY = 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 = engage document.onmousemove = dragIt document.onmouseup = release if (document.all) { resizeimagediv.innerHTML="<img src="+imgsrc+" width="+Math.ceil(resizeimg_width/startsize)+">" document.all.resizeimagediv.style.posLeft=resizeimg_startx document.all.resizeimagediv.style.posTop=resizeimg_starty document.all.gripimagediv.style.posLeft=gripimg_startx document.all.gripimagediv.style.posTop=gripimg_starty } if (document.layers) { document.resizeimagediv.document.write("<img src="+imgsrc+" width="+Math.ceil(resizeimg_width/startsize)+">") document.resizeimagediv.document.close() document.resizeimagediv.left=resizeimg_startx document.resizeimagediv.top=resizeimg_starty document.gripimagediv.left=gripimg_startx document.gripimagediv.top=gripimg_starty } } // - End of JavaScript - --> </SCRIPT> <style type="text/css"> A, A:Visited, A:Active { color:FFFFFF; } A:Hover { color:FF0000; } .baselinestyle { position: absolute; left:10px; top:180px; font-size:8pt; font-family:Verdana; color:FFFFFF; } </STYLE>

Insert into <BODY>
<BODY bgcolor=#000000 onLoad="init()"> <DIV ID="resizeimagediv" style="position:absolute;top:-3000px;"></DIV> <DIV ID="gripimagediv" style="position:absolute;top:-3000px;"><IMG NAME="gripimage" SRC="grip201.gif"></DIV>

Other Options