<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#div {
position:absolute;left:300px;top:30px;width:500px;height:375px;border:solid red 1px;
}
#div IMG{
width:500px;height:375px;
}
.but {
position:absolute;z-Index:2;width:24px;height:24px;cursor:pointer;background-Repeat:no-repeat;cursor:pointer;
opacity:.6; filter:alpha(opacity=60);
}
.up {
left:445px;top:350px;background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/Up1.gif);
}
.down {
left:470px;top:350px;background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/Down1.gif);
}
.message { /* CSS for the message DIV element */
position:absolute;z-Index:3;left:10px;top:10px;width:100px;height:30px;padding:5px;padding-Top:20px;background-Color:#CCFFFF;color:#0000FF;font-Size:12px;text-Align:center;
opacity:.6; filter:alpha(opacity=60);
}
/*]]>*/
</style></head>
<body>
<input id="b1" type="button" name="" value="Zoom In" onmouseup="zxcImagePanZoom.Zoom('div',0.1);" />
<input id="b2" type="button" name="" value="Zoom Out" onmouseup="zxcImagePanZoom.Zoom('div',-0.1);" />
<div id="div" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Listening.jpg" />
<div class="up but" title="+ve" ></div>
<div class="down but" title="+ve" ></div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Image Pan Zoom (02-Febuary-2013)
// by Vic Phillips http://www.vicsjavascripts.org.uk/
// The functional code size is 3.59K.
// ****** Functional Code - NO NEED to Change
var zxcImagePanZoom={
init:function(o){
var id=o.ID,p=document.getElementById(id),img=p?p.getElementsByTagName('IMG')[0]:false,cls=o.ButtonClass,mcls=o.MessageClass,z=o.ZoomBy,mz=o.MaximumZoom;
if (img){
var mcls=typeof(mcls)=='string'?mcls:false,z=typeof(z)=='number'?Math.abs(z):0.1,mz=typeof(mz)=='number'&&mz>1?mz:5,w=this.style(p,'width'),h=this.style(p,'height'),iw=img.width,ih=img.height,m=document.createElement('DIV'),reg=new RegExp(' '+cls+' '),els=p.getElementsByTagName('*'),n=0,b=[],z0=0
p.style.overflow='hidden';
img.style.position='absolute';
img.style.width=Math.max(w,iw)+'px';
img.style.height=Math.max(w,iw)/iw*ih+'px';
iw=img.width,ih=img.height;
img.style.left=(w-iw)/2+'px';
img.style.top=(h-ih)/2+'px';
m.style.position='absolute';
m.style.visibility='hidden';
if (mcls){
m.className=mcls;
p.appendChild(m);
}
for (;z0<els.length;z0++){
if (reg.test(' '+els[z0].className+' ')){
this.addevt(els[z0],'mouseup','Zoom',id,z*(n==0?1:-1));
this.addevt(els[z0],'mouseup','Zoom',id,z*(n==0?1:-1));
els[z0].style.visibility=n==0?'visible':'hidden';
b[n]=els[z0];
n++
if (n==2){
break;
}
}
}
o=this['zxc'+id]={
p:p,
img:img,
m:m,
mz:mz,
b:b,
w:w,
h:h,
iw:iw,
ih:ih,
lft:(w-iw)/2,
top:(h-ih)/2,
z:1,
drag:false
}
this.addevt(o.p,'mousedown','down',o);
this.addevt(document,'mouseup','up',o);
this.addevt(document,'mousemove','move',o);
}
},
Zoom:function(id,z){
var o=this['zxc'+id],w,zw;
if (o){
w=o.iw*o.z;
o.z=Math.min(Math.max(o.z+z,1),o.mz);
zw=o.iw*o.z
o.lft=Math.max((o.lft-o.w/2)*zw/w+o.w/2,-zw+o.w);
o.top=Math.max((o.top-o.h/2)*zw/w+o.h/2,-o.ih*o.z+o.h);
o.img.style.left=o.lft+'px';
o.img.style.top=o.top+'px';
o.img.style.width=zw+'px';
o.img.style.height=o.ih*o.z+'px';
o.b[0]?o.b[0].style.visibility=o.z<o.mz?'visible':'hidden':null;
o.b[1]?o.b[1].style.visibility=o.z>1?'visible':'hidden':null;
o.m.innerHTML='Zoom: '+o.z.toFixed(2);
o.m.style.visibility='visible';
clearTimeout(o.to);
o.to=setTimeout(function(){ o.m.style.visibility='hidden'; },2000);
}
},
down:function(o,p2,e){
document.onselectstart=function(event){ window.event.returnValue=false; }
o.mseXY=[e.clientX,e.clientY];
o.lft=this.style(o.img,'left');
o.top=this.style(o.img,'top');
o.drag=o.img;
return this.rtn(e);
},
move:function(o,p2,e){
if (o.drag){
var mse=[e.clientX,e.clientY];
o.lft=Math.max(Math.min(o.lft+mse[0]-o.mseXY[0],0),-o.iw*o.z+o.w);
o.top=Math.max(Math.min(o.top+mse[1]-o.mseXY[1],0),-o.ih*o.z+o.h);
o.img.style.left=o.lft+'px';
o.img.style.top=o.top+'px';
o.mseXY=mse;
return this.rtn(e);
}
},
rtn:function(e){
if(e.stopPropagation){
e.stopPropagation();
}
if (!window.event){
e.preventDefault();
}
e.cancelBubble=true;
e.cancel=true;
e.returnValue=false;
return false;
},
up:function(o){
if (o.drag){
o.drag=false;
document.onselectstart=null;
}
},
addevt:function(o,t,f,p1,p2){
var oop=this;
if (o.addEventListener){
o.addEventListener(t,function(e){ return oop[f](p1,p2,e);}, false);
}
else if (o.attachEvent){
o.attachEvent('on'+t,function(e){ return oop[f](p1,p2,e); });
}
},
style:function(o,p){
if (o.currentStyle){
return parseInt(o.currentStyle[p.replace(/-/g,'')]);
}
return parseInt(document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase()));
}
}
zxcImagePanZoom.init({
ID:'div', // the unique ID name of the image parent DIV. (string)
ButtonClass:'but', // the common class name of the 'zoom' in/out elements. (string, default = inline event calls)
MessageClass:'message', // the class name of the 'zoom' message DIV element. (string, default = no message)
ZoomBy:.1, // the 'zoom' in/out factor. (number, default = 0.1)
MaximumZoom:5 // the maximum 'zoom' in. (number, default = 5)
});
/*]]>*/
</script>
</body>
</html>