Code:
<!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[*/
.pop {
position:absolute;z-Index:101;top:300px;left:0px;width:100px;height:100px;background-Color:#FFCC66;border:solid red 1px;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Clip PopUp. (24-Febuary-2013)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
function zxcClipPopUp(cls){
var reg=new RegExp('\\W'+cls+'\\W'),els=document.body.getElementsByTagName('*'),ul,o,s,i,z0=0,z0a;
for (;z0<els.length;z0++){
if(reg.test(' '+els[z0].className+' ')){
o={};
s=els[z0].className.split(' ');
for (z0a=0;z0a<s.length;z0a++){
i=s[z0a].indexOf(':');
if (i>2){
o[s[z0a].substring(0,i).toLowerCase()]=s[z0a].substring(i+1);
}
}
new zxcClipPU(o,els[z0]);
}
}
}
function zxcClipPU(o,obj){
var pop=document.getElementById(o.popupid);
if (pop){
var m=o.mode,m=isFinite(m*1)&&m>0&&m<7?m*1:0,t=o.eventtype,t=t=='click'?'click':t=='toggle'?'toggle':'mouseover',ms=isFinite(o.speed*1)?o.speed*1:1000,w=pop.offsetWidth,h=pop.offsetHeight,ow=obj.offsetWidth,oh=obj.offsetHeight,osx=isFinite(o.offsetx*1)?o.offsetx*1:0,osy=isFinite(o.offsety*1)?o.offsety*1:oh;
document.body.appendChild(pop);
pop.style.display='block';
pop.style.position='absolute';
pop.style.visibility='hidden';
o=this;
o.obj=obj;
o.pop=pop;
o.m=m;
o.ary=[
['clip',[0,w,h,0],[0,w,0,0]], // 0 = down,
['clip',[0,w,h,0],[h,w,h,0]], // 1 = up,
['clip',[0,w,h,0],[0,0,h,0]], // 2 = right,
['clip',[0,w,h,0],[0,w,h,w]], // 3 = left,
['clip',[0,w,h,0],[Math.ceil(h/2),Math.floor(w/2),Math.floor(h/2),Math.ceil(w/2)]], // 4 = center,
['clip',[0,w,h,0],[0,Math.floor(w/2),h,Math.ceil(w/2)]], // 5 = horizontal,
['clip',[0,w,h,0],[Math.ceil(h/2),w,Math.floor(h/2),0]] // 6 = vertical,
];
o.g=[null,[200],[0],[0]];
o.osx=osx;
o.osy=osy;
o.ms=ms;
o.close=t=='mouseover'?1000:200;
o.ud=false;
if (t=='toggle'){
o.addevt(o.obj,'click','toggle',false);
}
else {
o.addevt(o.obj,t,'Pop',true);
o.addevt(pop,t,'Pop',true);
}
if (t=='mouseover'){
o.addevt(o.obj,'mouseout','Pop',false);
o.addevt(pop,'mouseout','Pop',false);
}
o.addevt(document,'click','click');
}
}
zxcClipPU.prototype={
Pop:function(ud,e){
var o=this
var o=this,p=o.pos(o.obj),f=o.g[3],t=o.g[ud?1:2],ms=o.ms*Math.abs((t[0]-f[0])/o.g[1])||20;
clearTimeout(o.to);
o.to=setTimeout(function(){ o.animate(o.pop,o.ary[o.m],o.ary[o.m][3]||o.ary[o.m][2],o.ary[o.m][ud?1:2],new Date(),ms);
o.animate(false,o.g,f,t,new Date(),ms);
o.pop.style.visibility='visible';
o.ud=ud;
},ud?200:o.close);
o.pop.style.left=p[0]+o.osx+'px';
o.pop.style.top=p[1]+o.osy+'px';
},
toggle:function(){
this.Pop(!this.ud);
},
animate:function(obj,ary,f,t,srt,mS){
clearTimeout(ary[4]);
var o=this,ms=new Date().getTime()-srt,nu,n=[],z0=0;
for (;z0<4;z0++){
nu=(t[z0]-f[z0])/mS*ms+f[z0];
if (isFinite(nu)){
n[z0]=Math.round(nu);
}
}
ary[3]=n;
obj?obj.style.clip='rect('+n[0]+'px,'+n[1]+'px,'+n[2]+'px,'+n[3]+'px)':null;
if (ms<mS){
ary[4]=setTimeout(function(){ o.animate(obj,ary,f,t,srt,mS); },10);
}
else {
ary[3]=t;
obj?obj.style.clip='rect('+t[0]+'px,'+t[1]+'px,'+t[2]+'px,'+t[3]+'px)':null;
!ary[0]&&t==0?o.pop.style.visibility='hidden':null;
}
},
click:function(p,e){
if (e){
var o=this,obj=e.target?e.target:e.srcElement;
if (obj){
while (obj.parentNode){
if (obj==o.pop||obj==o.obj){
return;
}
obj=obj.parentNode;
}
}
o.Pop(false);
}
},
pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},
addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener){
o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
}
else if (o.attachEvent){
o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
}
}
}
/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/
function Init(){
// parameter 0 = the common class name of the elements to attach a PopUP.
zxcClipPopUp('master');
// <img id="img1" class="popup PopUpID:pop1 Mode:4 EventType:mouseover Speed:500 " src="Egypt5.jpg" alt="img" width="100" height="75" />
// Class Name Options
// PopUpID = the unique ID name of the Pop Up element.
// Mode = the mode of execution, 0 = down, 1 = up, 2 = right, 3 = left, 4 = center, 5 = horizontal, 6 = vertical.
// EventType = the evvent type to open/close the PopUp.
// Speed = the animattion duration in milli seconds.
// OffsetX = the horizontal offset from the PopUp master element.
// OffsetY = the vertical offset from the PopUp master element.
}
if (window.addEventListener){
window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
window.attachEvent('onload',Init);
}
/*]]>*/
</script>
</head>
<body>
<img id="img1" class="master PopUpID:pop1 Mode:4 EventType:mouseover Speed:500 " src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="100" height="75" />
<img id="img2" class="master PopUpID:pop2 Mode:0 EventType:mouseover Speed:500 offsetX:100 offsety:0" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="100" height="75" />
<br />
<img id="img3" class="master PopUpID:pop3 Mode:2 EventType:click Speed:500 " src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="100" height="75" />
<img id="img4" class="master PopUpID:pop4 Mode:2 EventType:toggle Speed:500 " src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="100" height="75" />
<div id="pop1" class="pop" >PopUp 1</div>
<div id="pop2" class="pop" style="height:75px;background-Color:#FFFFCC;">PopUp 2</div>
<div id="pop3" class="pop" >PopUp 3</div>
<div id="pop4" class="pop" >PopUp 4</div>
</body>
</html>
Junior Coders
jQuery Pop up Box
Elite Coders
Posting Permissions
Reply With Quote
Bookmarks