CodeFoot.com: JavaScript: Active Image Resizing With Drag

JavaScript: Active Image Resizing With Drag

INFORMATION:
============

For IE4.X and later; degrades gracefully.

INSTRUCTIONS:
=============

Step One:
---------

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

Step Two:
---------

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

Any number of images may be used; however, 
all should usually be the same default size.

Step Three:
-----------

Add the iBeReady variable to an onload event
in the body tag:

// THE SCRIPT:
// ===========

// 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>

Comments

See the instructions in the script for installation directions. Try the popup demo (above) to exercise the script.

This script allows you to resize one or more images on a page by clicking and dragging on the image(s). A single left-click will also reset the image to a default size. Any number of images may be used.

CodeBrain.com	BrainCode.com	CodeFoot.com	CodeBelly.com	CodeLifter.com
PopUpWorks.com	D3Q.com	etLux.com	FFFast.com	OECCorp.com
	IEFix.com		MicroTicker.com