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
Printable View
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
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
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>
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?
the posted thread #3 will do this
or http://www.vicsjavascripts.org.uk/Ma...MapToolTip.htm
see also
http://www.vicsjavascripts.org.uk/Ma...MapHiLight.htm
http://www.vicsjavascripts.org.uk/Ma...MapToolTip.htm
Wow..... got it... will do the job perfectly.
Go raibh maith agat.
remove
onclick="IM1.Toggle(3);"
this is a hangover from a previous script