<!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 {
position:absolute;z-Index:101;left:-3000px;top:300px;width:100px;height:20px;background-Color:#FFFFCC;border:solid red 1px;text-Align:center;
}
#img1 {
width:351px;height:263px;border-Width:0px;
}
/*]]>*/
</style>
</head>
<body>
<img id="img1" src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" alt="WinterPalace" usemap="#ImageMap1" ismap="ismap" />
<map name="ImageMap1" id="map1" >
<area href="#" rel="pop1" shape="rect" alt="" coords="6,138,73,199" />
<area href="#" rel="pop2" shape="rect" alt="" coords="85,80,173,129" />
<area href="#" rel="pop3" shape="circle" alt="" coords="235,158,15" />
<area href="#" rel="pop4" shape="poly" alt="" coords="220,147,220,147,203,145,178,158,160,180,185,187,216,190,220,147" onclick="IM1.Toggle(3);" />
</map>
<div id="pop1" class="popup" >My PopUp 1</div>
<div id="pop2" class="popup" >My PopUp 2</div>
<div id="pop3" class="popup" >My PopUp 3</div>
<div id="pop3" class="popup" >My PopUp 4</div>
<script type="text/javascript">
/*<![CDATA[*/
// Image Map PopUps (12-November-2012)
// by Vic Phillips http://www.vicsjavascripts.org.uk
var zxcMapPopUp={
init:function(o){
var id=o.MapID,map=document.getElementById(id),hide=o.AutoHide,ms=o.FadeDuration,x=o.XOffset,y=o.YOffset,as=map.getElementsByTagName('AREA'),pop,ary=[],z0=0;
for (;z0<as.length;z0++){
pop=document.getElementById(as[z0].rel);
if (pop){
this.addevt(as[z0],'mousemove','popup',id,ary.length);
ary.push([pop,'dly'+z0]);
}
}
zxcMapPopUp['zxc'+id]={
ary:ary,
hide:typeof(hide)=='number'?hide:1000,
ms:typeof(ms)=='number'?ms:false,
x:typeof(x)=='number'?x:10,
y:typeof(y)=='number'?y:10
}
},
popup:function(e,id,nu){
var o=zxcMapPopUp['zxc'+id],oop=this,mse=this.mse(e);
if (o&&o.ary[nu]){
if (o.lst&&o.lst!=o.ary[nu]){
o.lst[0].style.left='-3000px';
}
if (o.lst!=o.ary[nu]&&o.ms){
clearTimeout(o.dly);
oop.animate(o,o.ary[nu][0],0,100,new Date(),o.ms);
}
o.ary[nu][0].style.left=mse[0]+o.x+'px';
o.ary[nu][0].style.top=mse[1]+o.y+'px';
o.lst=o.ary[nu];
clearTimeout(o.ary[nu][1]);
o.ary[nu][1]=setTimeout(function(){ o.ary[nu][0].style.left='-3000px'; },o.hide);
}
},
mse:function(e){
if (window.event){
var docs=[document.body.scrollLeft,document.body.scrollTop];
if (!document.body.scrollTop){
docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
}
return [e.clientX+docs[0],e.clientY+docs[1]];
}
return [e.pageX,e.pageY];
},
animate:function(o,obj,f,t,srt,mS){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
obj.style.filter='alpha(opacity='+now+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
o.now=now;
}
if (ms<mS){
o.dly=setTimeout(function(){ oop.animate(o,obj,f,t,srt,mS); },10);
}
else {
}
},
addevt:function(o,t,f,p,p1){
var oop=this;
if (o.addEventListener){ o.addEventListener(t,function(e){ return oop[f](e,p,p1);}, false);
}
else if (o.attachEvent){
o.attachEvent('on'+t,function(e){ return oop[f](e,p,p1); });
}
}
}
zxcMapPopUp.init({
MapID:'map1', // the unique ID name of the image map. (string)
AutoHide:2000, //(optional) the auto hide delay in milli seconds. (number, default = 1000)
XOffset:20, //(optional) the x offset from the mouse. (number, default = 10)
YOffset:0, //(optional) the y offset from the mouse. (number, default = 10)
FadeDuration:1000 //(optional) the auto hide delay in milli seconds. (number, default = no fade)
});
/*]]>*/
</script>
</body>
</html>