Image Map Rollover with Popup

**darrylw99** · 11-12-2012, 01:16 PM

I have a map of the UK with dots on it. when the user roll over a dot i want a popup to appear with relevant info on the 'dot'.

Ive downloaded the MILONIC version but you have to pay for it.

Darryl

**Beverleyh** · 11-12-2012, 01:26 PM

Maybe this DD script can be used: http://www.dynamicdrive.com/dynamici...ckytooltip.htm

Or this one: http://www.dynamicdrive.com/dynamici...oontooltip.htm

In fact, there are many tooltip scripts on DD that might suit your needs: http://www.dynamicdrive.com/dynamicindex5/index.html

**vwphillips** · 11-12-2012, 03:20 PM

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[*/

.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>

**Webiter** · 11-13-2012, 04:03 PM

A similar requirement. Seeking to present popup images from image map background. Need to be able to position popups relative to locations here. Is this putting me on the correct track?