<!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[*/
.popup {
z-Index:101;border:solid red 1px;
}
.caption {
z-Index:101;width:200px;margin-Top:5px;text-Align:center;background-Color:#FFFFCC;border:solid red 1px;
}
.mask {
z-Index:100;left:0px;top:0px;width:100%;height:100%;background-Color:#99FFFF;
/* Moz */
opacity: .5;
/* IE5-7 */
filter: alpha(opacity=50);
/* IE8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
/*]]>*/
</style></head>
<body>
<img src="http://www.vicsjavascripts.org/StdImages/Egypt5678.jpg" usemap="#ImageMap4" ismap="ismap" border="0" />
<map name="ImageMap4" id="map4" >
<area shape="rect" alt="" coords="0,0,100,75" onclick="zxcImagePopUp.Open('map4','http://www.vicsjavascripts.org/StdImages/EgyptM3.jpg','Egypt 5');" />
<area shape="rect" alt="" coords="100,0,200,75" onclick="zxcImagePopUp.Open('map4','http://www.vicsjavascripts.org/StdImages/Egypt6.jpg','Egypt 6');" />
<area shape="rect" alt="" coords="0,75,100,150" onclick="zxcImagePopUp.Open('map4','http://www.vicsjavascripts.org/StdImages/EgyptM2.jpg','Egypt 7');" />
<area shape="rect" alt="" coords="100,75,200,150" onclick="zxcImagePopUp.Open('map4','http://www.vicsjavascripts.org/StdImages/Egypt8.jpg','Egypt 8');" />
</map>
<script type="text/javascript">
/*<![CDATA[*/
// Image PopUp (09-May-2014)
// by Vic Phillips http://www.vicsjavascripts.org
var zxcImagePopUp={
Open:function(id,src,c){
var oop=this,o=oop['zxc'+id];
if (o&&typeof(src)=='string'){
clearTimeout(o.to);
if (!o.ud){
o.c.innerHTML=c||'';
o.ni=new Image();
o.ni.src=src;
o.to=setTimeout(function(){ oop.load(o,false); },100);
}
else {
oop.open(o,false);
if (src.slice(src.lastIndexOf('/')+1)!=o.ni.src.slice(o.ni.src.lastIndexOf('/')+1)){
o.nxt=[src,c];
}
}
}
},
init:function(o){
var id=o.ID,pc=o.PopUpClass,mc=o.MaskClass,cc=o.CaptionClass,ms=o.Animate;
if (typeof(id)=='string'&&typeof(pc)=='string'&&!this['zxc'+id]){
var mk=document.createElement('DIV'),i=document.createElement('IMG'),msk,c;
mk.style.position=i.style.position='fixed';
c=mk.cloneNode(true);
msk=mk.cloneNode(true);
mk.style.right=mk.style.bottom=mk.style.width=mk.style.height=msk.style.left='0px';
i.style.left=i.style.top=c.style.left=c.style.top=msk.style.top='-30000px';
i.className=pc;
msk.className=mc;
c.className=cc;
document.body.appendChild(mk);
typeof(mc)=='string'?document.body.appendChild(msk):null;
document.body.appendChild(i);
typeof(cc)=='string'?document.body.appendChild(c):null;
o.id=id;
o.i=i;
o.a=[[i,'left'],[i,'top'],[i,'height'],[i,'width']];
o.c=c;
o.mk=mk;
o.msk=msk;
o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
this.addevt(msk,'click','open',o,false);
this.addevt(document,'click','close',o,false);
this.addevt(window,'resize','resize',o);
this['zxc'+id]=o;
}
},
load:function(o){
var oop=this;
clearTimeout(o.to);
if (o.ni.width<40){
return o.to=setTimeout(function(){ oop.load(o); },100);
}
o.i.src=o.ni.src;
o.i.style.width=o.ni.width+'px';
o.i.style.height=o.ni.height+'px';
this.open(o,true);
},
open:function(o,ud){
o.msk.style.left=o.msk.style.top='0px';
o.msk.style.width=o.mk.offsetLeft+'px';
o.msk.style.height=o.mk.offsetTop+'px';
o.c.style.top='-30000px';
this.animate(o,o.a[0],ud?o.mk.offsetLeft/2:o.a[0][3],ud?(o.mk.offsetLeft-o.i.offsetWidth)/2:o.mk.offsetLeft/2,new Date(),o.ms);
this.animate(o,o.a[1],ud?o.mk.offsetTop/2:o.a[1][3],ud?(o.mk.offsetTop-o.i.offsetHeight)/2:o.mk.offsetTop/2,new Date(),o.ms);
this.animate(o,o.a[2],ud?0:o.a[2][3],ud?o.ni.height:0,new Date(),o.ms);
this.animate(o,o.a[3],ud?0:o.a[3][3],ud?o.ni.width:0,new Date(),o.ms,ud);
o.ud=ud;
},
close:function(o){
if (o.ud){
this.open(o,false);
}
},
resize:function(o){
if (o.ud){
o.msk.style.width=o.mk.offsetLeft+'px';
o.msk.style.height=o.mk.offsetTop+'px';
o.c.style.top='-30000px';
this.animate(o,o.a[0],o.a[0][3],(o.mk.offsetLeft-o.i.offsetWidth)/2,new Date(),o.ms/4);
this.animate(o,o.a[1],o.a[1][3],(o.mk.offsetTop-o.i.offsetHeight)/2,new Date(),o.ms/4,true);
}
},
animate:function(o,a,f,t,srt,mS,nxt){
clearTimeout(a[4]);
var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
a[3]=Math.max(f<0||t<0?n:0,n);
a[0].style[a[1]]=a[3]+'px';
}
if (ms<mS){
a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,nxt); },10);
}
else {
a[3]=t;
a[0].style[a[1]]=t+'px';
if (nxt===false){
o.i.style.left=o.i.style.top=o.msk.style.left=o.msk.style.top='-30000px';
if (o.nxt){
oop.Open(o.id,o.nxt[0],o.nxt[1]);
o.nxt=false;
}
}
if (nxt===true&&o.c.innerHTML){
o.c.style.left=o.i.offsetLeft+(o.i.offsetWidth-o.c.offsetWidth)/2+'px';
o.c.style.top=o.i.offsetTop+o.i.offsetHeight+'px';
}
}
},
addevt:function(o,t,f,p,p1){
var oop=this;
o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
}
}
zxcImagePopUp.init({
ID:'map4', // a unique name to identify the script instance. (string)
PopUpClass:'popup', // popup image class name to specify the popup z-Index etc. (string)
MaskClass:'mask', //(optional) image mask class name. (string, default = no image mask)
CaptionClass:'caption', //(optional) image caption class name. (string, default = no image caption)
Animate:1000 //(optional) the animation duration in millisec. (string, default = 1000)
});
/*]]>*/
</script>
</body>
</html>