Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Vics JavaScripts</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Vic Phillips">
<meta name="keywords" content="JavaScript, dhtml, javascript, css, dynamic html, Zoom, Image, Slide Show" />
<meta name="description" content="a collection of javascripts." />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" href="http://www.vicsjavascripts.org.uk/SiteCSS.css" type="text/css" >
<link rel="stylesheet" href="http://www.vicsjavascripts.org.uk/vwpSearchPanel.css" type="text/css" >
<style type="text/css">
#pop {
position:fixed;z-Index:101;visibility:hidden;left:60px;top:100px;width:351px;height:263px;
}
#anchor {
position:absolute;overflow:hidden;left:660px;top:115px;width:200px;height:150px;border:solid red 1px;
}
</style>
<script src="http://www.vicsjavascripts.org.uk/SiteFunctions.js" type="text/javascript"></script>
<script src="http://www.vicsjavascripts.org.uk/SiteDates.js" type="text/javascript"></script>
<script src="http://www.vicsjavascripts.org.uk/UpdateArrays.js" type="text/javascript"></script>
<script src="http://www.vicsjavascripts.org.uk/UpdateArrays.js" type="text/javascript"></script>
<script src="http://www.vicsjavascripts.org.uk/vwpSearchPanel.js" type="text/javascript"></script>
<script type="text/javascript">
// Zoom Pan - (09-Febuary-2013)
// by Vic Phillips - http://www.vicsjavascripts.org.uk
// Mode = 0 = clip out and zoom in and pan to the anchor
// Mode = 1 = clip in and no zoom in and pan to the anchor
// Mode = 2 = pan out from the anchor and clip in.
var zxcZoomPan={
init:function(o){
var id=o.ID,obj=document.getElementById(id);
if (obj&&!this['zxc'+id]){
var oop=this,mde=o.Mode,ud=true,ms=o.Animate,a=document.getElementById(o.AnchorID),hold=o.HoldDelay,ao=o.AutoOpen,mde=typeof(mde)=='number'&&mde>=0&&mde<3?Math.floor(mde):0,ms=typeof(ms)=='number'&&ms>20?ms:1000,w=obj.offsetWidth,h=obj.offsetHeight,lft=obj.offsetLeft,top=obj.offsetTop,aw=a.offsetWidth,ah=a.offsetHeight;
o=this['zxc'+id]={
id:id,
obj:obj,
anchor:a,
clip:['clip',null,ud&&mde!=2?[h/2,w/2,h/2,w/2]:[0,w,h,0],[h/2,w/2,h/2,w/2],[0,w,h,0]],
ary:a?[['left',null,[(ud?obj:a).offsetLeft],[obj.offsetLeft],[a.offsetLeft]],['top',null,[(ud?obj:a).offsetTop],[obj.offsetTop],[a.offsetTop]],['width',null,[ud&&mde!=2?w:aw],[w],[aw]],['height',null,[ud&&mde!=2?h:ah],[h],[ah]] ]:null,
lft:lft,
top:top,
ms:ms,
hold:typeof(hold)=='number'&&hold>0?hold:false,
ud:a?mde==2?false:ud:true,
cnt:0,
max:(typeof(mde)!='number'||mde==0||mde==2)&&a?2:1,
mde:mde
}
}
o.obj.style.width=(o.mde<2||!a?w:aw)+'px';
o.obj.style.height=(o.mde<2||!a?h:ah)+'px';
(o.mde<2||!a?document.body:a).appendChild(o.obj);
o.obj.style.position=o.mde<2||!a?'fixed':'static';
o.obj.style.visibility=o.mde<1?'hidden':'visible';
clearTimeout(o.to);
typeof(ao)=='number'?o.to=setTimeout(function(){ oop.Toggle(id); },ao):null;
},
Toggle:function(id,ud){
var o=this['zxc'+id];
if (o&&o.cnt<o.max){
clearTimeout(o.to);
o.cnt=0;
((o.ud||o.max==1)&&(o.mde!=2))||(o.ud&&o.mde==2)?this.clip(o,o.mde!=1?o.ud:false):this.ltwh(o,o.ud);
}
},
clip:function(o,ud){
if (o.cnt<o.max){
o.cnt++;
clearTimeout(o.to);
o.obj.style.visibility='visible';
document.body.appendChild(o.obj);
this.animate(o,o.obj,o.clip,o.clip[o.mde!=1?2:4],o.clip[ud?4:3],new Date(),o.ms,true);
}
else {
o.cnt=0;
o.ud=!o.ud;
}
},
ltwh:function(o,ud){
var d=new Date(),p=this.pos(o.anchor),z0=0;
if (o.cnt<2){
o.cnt++;
clearTimeout(o.to);
o.obj.style.visibility='visible';
if (o.mde==2||o.mde==0){
o.mde==2?o.ary[0][2]=[o.ud?o.lft:p[0]]:null;
o.mde==2?o.ary[1][2]=[o.ud?o.top:p[1]]:null;
o.ary[0][4]=[o.ud?p[0]:o.lft];
o.ary[1][4]=[o.ud?p[1]:o.top];
}
document.body.appendChild(o.obj);
o.obj.style.position='fixed';
for (;z0<4;z0++){
this.animate(o,o.obj,o.ary[z0],o.ary[z0][2],o.ary[z0][ud?4:3],d,o.ms,z0==3);
}
}
else {
o.cnt=0;
o.ud=!o.ud;
}
},
animate:function(o,obj,ary,f,t,srt,mS,nxt){
clearTimeout(ary[1]);
var oop=this,ms=new Date()-srt,n,now=[],z0=0;
for (;z0<t.length;z0++){
n=Math.round((t[z0]-f[z0])/mS*ms+f[z0]);
now[z0]=isFinite(n)?Math.max(f[z0]>=0&&t[z0]>=0?0:n,n):t[z0];
}
ary[2]=now;
obj.style[ary[0]]=ary[0]=='clip'?'rect('+now[0]+'px,'+now[1]+'px,'+now[2]+'px,'+now[3]+'px)':now[0]+'px';
if (ms<mS){
ary[1]=setTimeout(function(){ oop.animate(o,obj,ary,f,t,srt,mS,nxt); },10);
}
else {
ary[2]=t;
if (nxt&&o.max>1&&o.hold){
clearTimeout(o.to);
o.to=setTimeout(function(){ o.ud?oop.ltwh(o,o.ud):oop.clip(o,o.ud); },o.hold);
}
if (nxt&&(o.max==1||o.mde==1)){
o.cnt=0;
o.ud=o.mde==1||!o.ud;
o.mde=0;
o.max=o.anchor?2:1;
}
if (nxt&&o.ud&&ary[0]=='height'){
o.anchor.appendChild(o.obj);
o.obj.style.position='static';
}
}
},
pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
}
}
</script>
<script type="text/javascript">
function Init(){
zxcZoomPan.init({
ID:'pop', // the unique ID name of the image. (string)
Mode:0, //(optional) the mode of execution(see Note 1). (string, default = 0 =clip out and zoom in and pan to the anchor)
Animate:1000, //(optional) the animation duration in mill seconds. (number, default = 1000)
AutoOpen:1000, //(optional) the delay in executing the effect on initialization in milli seconds. (number, default = no effect on itialization)
AnchorID:'anchor', //(optional) the unique ID name of the 'anchor' element. (string, default = on anchor)
HoldDelay:2000 //(optional) the 'hold' delay in milli seconds before zoom in and pan to the anchor. (number, default = zoom in and pan to the anchorn)
})
// Note 1
// Mode = 0 = clip out and zoom in and pan to the anchor
// Mode = 1 = clip in and no zoom in and pan to the anchor
// Mode = 2 = pan out from the anchor and clip in.
}
if (window.addEventListener){
window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
window.attachEvent('onload',Init);
}
</script>
<script type="text/javascript">
var zxcPosted=[2013,02,09];
var zxcUpDate=[2013,02,09];
var pnParth='http://www.vicsjavascripts.org.uk/';
zxcAddEvt(window,'siteDates','load');
zxcAddEvt(window,'siteTitle','load',['Zoom Pan DRAFT',350,150,390,520]);
zxcAddEvt(window,'siteTabsInit','load',['tab1','tab','tabitem','tabtxt','tabactive',['Comments','Code','Initialisation','CSS','HTML']]);
zxcAddEvt(window,'vwpInitSearchPanel','load');
</script>
</head>
<body>
<div id="header" style="z-Index:2;" >
<div id="vwpanchor" style="position:absolute;left:0px;top:0px;width:0px;height:0px;" ></div>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" height="31" width="88">
</a>
<div id="SMRed">VicsJavaScripts</div>
<div id="SMBlack">VicsJavaScripts</div>
<div id="date" class="SMText"></div>
<div id="update" class="SMText"></div>
<div id="posted" class="SMText"></div>
<div id="dates" style="position:absolute;left:170px;top:70px;"></div>
<div id="TitleRed"></div>
<div id="TitleBlack"></div>
</div>
<div style="height:20px;" ></div>
<div id="content1" class="content" style="text-Align:center;" >
<br>
<input type="button" name="" value="Toggle" onmouseup="zxcZoomPan.Toggle('pop',true);" >
<img id="pop" src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" alt="img" >
<div id="anchor" ></div>
</div>
<div style="height:20px;" ></div>
<div id="content2" class="content">
<div id="tab1" class="tabpanel" >
<div class="tab" style="z-Index:1;" ></div>
<div class="tab" style="left:155px;" ></div>
<div class="tab" style="left:260px;" ></div>
<div class="tab" style="left:365px;" ></div>
<div class="tab" style="left:470px;" ></div>
<div class="tabitem" >
<div >
<div style="position:absolute;left:20px;top:20px;width:720px;height:380px;" >
</div>
</div>
</div>
<div class="tabitem" >
<textarea name="scripttab" class="tabta" rows="1" cols="1" >
</textarea>
</div>
<div class="tabitem" style="z-Index:1;" >
<textarea name="scripttab" class="tabta" rows="1" cols="1" >
</textarea>
</div>
<div class="tabitem" >
<textarea name="scripttab" class="tabta" rows="1" cols="1" >
</textarea>
</div>
<div class="tabitem" >
<textarea name="scripttab" class="tabta" rows="1" cols="1" >
</textarea>
</div>
<input type="button" name="e" value="Select All" >
</div>
</div>
<div style="height:50px;" ></div>
</body>
</html>
Reply With Quote
Bookmarks