Today too, this tag still has the same charm, I love it.
I’ve made a little class using mootools to reborn my favorite html tag.

• Easy to setup.
• Stop “onmouseover”
• Restart “onmouseout”

See demo

For this moment, this class support only “slide” from right to left, I’ll add direction option when I’ve finished some works.

Download script

It’s very easy to do it using mootools core and mootools Drag plugin

Click here to see demo

First you have to call the mootools core and mootools Drag plugin

<script src="mootools-1.2.3-core-yc.js" type="text/javascript"></script>
<script src="mootools-1.2.3.1-more.js" type="text/javascript"></script>

The Javascript code :

var DivID		=	$('CropFrom');
var ImgID		=	$('CropMe');
var InputUrlID	=	$('UrlID');
var InputTopID	=	$('TopID');
var InputLeftID	=	$('LeftID');

InputUrlID.set('value',ImgID.get('src'));	// Add URL to form
var DragInDiv = new Drag(DivID, {
modifiers: {
x: 'scrollLeft',
y: 'scrollTop',
},
style: false,
invert: true,
onSnap: function(el){
ImgID.setStyles({'opacity':0.5})
},
onComplete: function(el){
ImgID.setStyles({'opacity':1})
InputTopID.set('value',	ImgID.getCoordinates(DivID).top); // Add new TOP to form
InputLeftID.set('value',	ImgID.getCoordinates(DivID).left); // Add new LEFT to form
}
});

CSS code :

#CropFrom {
height		:	100px;
width		:	100px;
overflow	:	hidden;
cursor		:	move;
margin		:	0 auto;
}

The Html code :

		<div id="CropFrom">
			<img id="CropMe" src="elkalidi_abdelkader.jpg"  />
		</div>
		<input id="UrlID" type="hidden" name="url" value="" />
		<input id="TopID" type="hidden" name="top" value="0" />
		<input id="LeftID" type="hidden" name="left" value="0" />

Download full script