Interactive Image re-sizer code

Interactive Image re-sizer

Here's the code you need - follow each step carefully, mind!

Step One:

Place this script in the head of the page. Set the six dimensioning variables where shown in the script (below).

<SCRIPT LANGUAGE="JavaScript> // sets the default size of the image(s) defaultXsize = 100; defaultYsize = 100; // sets the minimum size of the image(s) minimumXsize = 50; minimumYsize = 50; // sets the maximum size of the image(s) maximumXsize = 250; maximumYsize = 250; // Do not edit below this line. // ---------------------------- iBeReady = false; function dragResizeImage(dragEvent,which){ if (iBeReady){ posX = eval("document."+which+".offsetLeft"); posY = eval("document."+which+".offsetTop"); newXsize = dragEvent.x; newYsize = dragEvent.y; newXsize = newXsize - posX; newYsize = newYsize - posY; if (newXsize >= maximumXsize) newXsize = maximumXsize; if (newYsize >= maximumYsize) newYsize = maximumYsize; if (newXsize <= minimumXsize) newXsize = minimumXsize; if (newYsize <= minimumYsize) newYsize = minimumYsize; eval("document."+which+".width=newXsize"); eval("document."+which+".height=newYsize"); } } function clickResetImageSize(which){ if (iBeReady){ eval("document."+which+".width=defaultXsize"); eval("document."+which+".height=defaultYsize"); } } </script>

Step Two:

In the body, give each image a unique name and attach the functions as shown:

<img src="someimage.jpg"
name="imageOne"
width="100" height="100"
onDrag="dragResizeImage(event,this.name)"
onClick="clickResetImageSize(this.name)">

<img src="anotherimage.jpg"
name="imageTwo"
width="100" height="100"
onDrag="dragResizeImage(event,this.name)"
onClick="clickResetImageSize(this.name)">

Any number of images may be used; however, all should usually be the same default size. I'll give you a tip, here - save the image you're going to use at its maximum resolution you're likely to get used on your page, but initially sized smaller - it's great for screen dumps and so on!

Step Three

Add the following to your <body> statement:

onload="iBeReady=true;"

so it looks like:

<body onload="iBeReady=true;">

And that's pretty much all there is to it! Click here to get back to the demo!