This is only a rough idea though it does work on images that are the same height and width.
Have a play.
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY>
<SCRIPT language=JavaScript1.2>
<!--
var moving=false
function Dragnow(){
curposx=event.clientX // Cursorx Start Position
curposy=event.clientY // Cursory Start Position
objectx=moveobject.style.pixelLeft // Objectx Start Position
objecty=moveobject.style.pixelTop // Objecty Start Position
moving=true
document.onmousemove=Moveto
}
function Moveto(){
if (moving==true){
document.all.moveobject.style.pixelLeft=event.clientX-(curposx-objectx) // Objectx New Pos
document.all.moveobject.style.pixelTop=event.clientY-(curposy-objecty) // Objecty New Pos
return false
}
}
if (document.all){
document.onmouseup=new Function("moving=false")
}
// -->
</SCRIPT>
<SCRIPT>
i = 0;
deg2rad = Math.PI / 180;
function SetRotation(deg){
rad = deg * deg2rad;
costheta = Math.cos(rad);
sintheta = Math.sin(rad);
moveobject.filters.item(0).M11 = costheta;
moveobject.filters.item(0).M12 = -sintheta;
moveobject.filters.item(0).M21 = sintheta;
moveobject.filters.item(0).M22 = costheta;
}
function DoAnimation(){
//moveobject.onfilterchange = DoAnimation;
i += 90;
if (i > 359){
i = 0;
moveobject.onfilterchange = null;
}
SetRotation(i)
}
</SCRIPT>
<DIV id="moveobject" style="position:absolute; left:245px; top: 115px; width:80px;border:2 solid #A050F0;background-color:#000000;color:gold;cursor: hand" onmousedown="Dragnow()" style="FILTER: progid:DXImageTransform.Microsoft.Matrix(sizingmethod='auto expand')">
<img src="pic1.jpg" width="100" height="100">
</DIV>
<form>
<input type="button" value="Rotate" onclick="DoAnimation()">
</form>
</BODY>
</HTML>