Example: (Hover over image)

At the head of your document:

function zxcMoveFramedClip(zxcid,zxcw,zxch,zxcspd){
 var zxcobj=zxcCkObject(zxcid);
 var zxcp=zxcobj.parentNode;
 zxcObj=zxcp;
 zxcp.frm=zxcobj;
 zxcp.w=zxcGetStyle(zxcp,'width');
 zxcp.h=zxcGetStyle(zxcp,'height');
 zxcp.cw=zxcGetStyle(zxcobj,'width');
 zxcp.ch=zxcGetStyle(zxcobj,'height');
 if (!zxcobj.oopclip){ zxcobj.oopclip=new zxcOOPClip(zxcobj,zxcw,zxch); }
 zxcobj.par=zxcp;
 zxcobj.w=zxcw||zxcobj.oopclip.w;
 zxcobj.h=zxch||zxcobj.oopclip.h;
 zxcobj.lim=[zxcGetStyle(zxcp,'width')-zxcGetStyle(zxcobj,'width'),zxcGetStyle(zxcp,'height')-zxcGetStyle(zxcobj,'height')];
 zxcClipPos(zxcobj);
}

function zxcOOPClip(zxcobj,zxcw,zxch){
 this.obj=zxcobj;
 this.cobj=zxcobj.getElementsByTagName('DIV')[0];
 this.obj.imgw=zxcGetStyle(this.cobj,'width')
 this.obj.imgh=zxcGetStyle(this.cobj,'height')
 this.os=[zxcGetStyle(this.cobj,'left'),zxcGetStyle(this.cobj,'top')];
 this.w=zxcw;
 this.h=zxch
 this.cnt=0;
 this.ref='zxcoopclip'+zxcOOPCnt++;
 window[this.ref]=this;
 this.to=null;
}

zxcOOPClip.prototype.clip=function(){
 this.x=this.x||0;
 this.y=this.y||0;
 zxcStyle(this.cobj,{left:(-this.x+this.os[0])+'px',top:(-this.y+this.os[1])+'px',clip:'rect('+this.y+'px,'+(this.x+this.w)+'px,'+(this.y+this.h)+'px,'+this.x+'px)'});
}

function zxcClipPos(zxcobj){
 zxcobj=zxcCkObject(zxcobj);
 zxcobj.oopclip.x=(zxcGetStyle(zxcobj,'left')*(zxcobj.imgw-zxcobj.w)/zxcobj.lim[0]);
 zxcobj.oopclip.y=(zxcGetStyle(zxcobj,'top')*(zxcobj.imgh-zxcobj.h)/zxcobj.lim[1]);
 zxcobj.oopclip.clip();
}

function zxcMse(zxce){
 if(!zxce) var zxce=window.zxce;
 if (document.all){ return [zxce.clientX+zxcDocS()[0],zxce.clientY+zxcDocS()[1]]; }
 else { return[zxce.pageX,zxcMseY=zxce.pageY]; }
}

function zxcAddEvt(zxcobj,zxcfun,zxcevt){
 if (zxcobj[zxcevt+'add']){ return; }
 zxcobj['zxcaddEvt'+zxcEvt]=window[zxcfun];
 zxcobj[zxcevt+'add']=true;
 zxcEventAdd(zxcobj,zxcevt,'zxcaddEvt'+zxcEvt);
 zxcEvt++;
}

function zxcCkObject(zxcid){
 var zxcp=zxcid;
 if (typeof(zxcp)=='string'){ zxcp=document.getElementById(zxcp); }
 return zxcp;
}

function zxcDrag(zxce){
 if (zxcMse(zxce)[0]>zxcPos(zxcObj)[0]&&zxcMse(zxce)[0]<zxcPos(zxcObj)[0]+zxcObj.w&&zxcMse(zxce)[1]>zxcPos(zxcObj)[1]&&zxcMse(zxce)[1]<zxcPos(zxcObj)[1]+zxcObj.h){
  zxcObj.frm.oopclip.x=(zxcMse(zxce)[0]-zxcPos(zxcObj)[0])*zxcObj.w/zxcObj.frm.imgw/2;
  zxcObj.frm.oopclip.clip();
 }

}
function zxcPos(zxcobj){
 zxclft=zxcobj.offsetLeft;
 zxctop=zxcobj.offsetTop;
 while(zxcobj.offsetParent!=null){
  zxcpar=zxcobj.offsetParent;
  zxclft+=zxcpar.offsetLeft;
  zxctop+=zxcpar.offsetTop;
  zxcobj=zxcpar;
 }
 return [zxclft,zxctop];
}

zxcAddEvt(document,'zxcDrag','mousemove');
//zxcAddEvt(document,'zxcMseUp','mouseup');

//-->
</script>

As your image code:
<body onload="zxcMoveFramedClip('Test1',500,200)"> <div style="position:relative;width:500px;height:200px;" > <div id="Test1" style="position:absolute;overflow:hidden;left:0px;top:0px;width:400px;height:200px;border:solid black 10px;" > <div style="position:absolute;overflow:hidden;left:0px;top:0px;width:600px;height:325px" > <img src="IMAGE URL" style="width:600px;height:325px" /> </center></div>