Looking for help with making mouse over tool tip work on an image hot spot.

**Trobin5544** · 10-08-2013, 05:58 AM

Hello,

I don't really know all the much java script, I am currently using Expression Web 4 to do my site editing..

I recently put a popup page on my site showing some shipping suggestions. I used the tool tip script from this site. Url http://www.dynamicdrive.com/dynamicindex16/showhint.htm

What I would like to to is use hotspot of the different shipping zones on the map instead of the ladders sizes. So when move your mouse over the area or state that you live in, the tool tip popup with and give you a shipping cost estimate.

The current popup I am using is here: http://robinsonswoodcrafts.com/pop-up.htm

and I've put a map of the USA with a couple of Hot spots on my site also.. http://robinsonswoodcrafts.com/USAMAP.html

Any help with be greatly appreciated.

Thanks

**vwphillips** · 10-08-2013, 11:11 AM

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

<head>
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
<title>Untitled 2</title>
<style type="text/css">

.tooltip {
  position:absolute;z-Index:101;left:-500px;top:-500px;width:150px;margin-Left:-75px;margin-Top:20px;height:50px;background-Color:#FFFFCC;border:solid red 1px;
}

#StickyDIV {
  position:absolute;left:50px;top:460px;width:150px;height:50px;background-Color:#FFFFCC;border:solid black 1px;
}

.stooltip {
  position:absolute;left:0px;top:-500px;width:150px;height:50px;background-Color:#FFFFCC;border:solid red 1px;
}

</style>
</head>

<body>
<p class="auto-style1">

<map id="Map0" name="ImgMap0">
<area alt="" coords="67, 139, 80, 143, 82, 124, 77, 116, 88, 117, 99, 102, 116, 107, 119, 102, 123, 92, 113, 71, 116, 59, 66, 44, 64, 54, 49, 46, 47, 74, 34, 107, 39, 114, 50, 122, 62, 130, 70, 131" href="http://www.robinsonswoodcrafts.com" shape="poly" />
<area coords="33, 110, 55, 126, 68, 143, 82, 143, 81, 116, 104, 104, 117, 106, 129, 121, 146, 124, 157, 152, 174, 155, 171, 172, 148, 190, 133, 195, 139, 206, 136, 211, 119, 212, 113, 203, 96, 194, 83, 184, 72, 193, 64, 195, 59, 186, 62, 211, 40, 218, 30, 218, 18, 167, 25, 138" href="http://robinsonswoodcrafts.com/quilt-ladder.htm" shape="poly" />
<area coords="150, 63, 243, 74, 245, 88, 224, 93, 222, 136, 230, 166, 239, 184, 219, 192, 212, 231, 195, 233, 194, 242, 196, 251, 184, 258, 175, 261, 161, 292, 144, 299, 117, 290, 82, 270, 58, 263, 46, 238, 34, 222, 61, 215, 63, 197, 85, 188, 113, 205, 132, 216, 141, 205, 136, 199, 171, 177, 174, 157, 160, 147, 139, 117, 119, 107, 125, 92, 118, 71, 117, 62, 133, 63" href="http://robinsonswoodcrafts.com/Heart_Floor_quilt_holder.htm" shape="poly" />
</map>

<img id="Img0" alt="Shipping Estimates" height="436" src="http://robinsonswoodcrafts.com/images/fedex-map.gif" style="float: left" usemap="#ImgMap0" width="530" /></p>

<div id="StickyDIV" >

 <div id="Map0-0" class="stooltip" >
  Tool tip 0
 </div>

 <div id="Map0-1" class="stooltip" >
  Tool tip 1
 </div>

 <div id="Map0-2" class="stooltip" >
  Tool tip 2
 </div>
Click the Map for Shipping

</div>

<map id="Map1" name="ImgMap1">
<area alt="" coords="67, 139, 80, 143, 82, 124, 77, 116, 88, 117, 99, 102, 116, 107, 119, 102, 123, 92, 113, 71, 116, 59, 66, 44, 64, 54, 49, 46, 47, 74, 34, 107, 39, 114, 50, 122, 62, 130, 70, 131" href="http://www.robinsonswoodcrafts.com" shape="poly" />
<area coords="33, 110, 55, 126, 68, 143, 82, 143, 81, 116, 104, 104, 117, 106, 129, 121, 146, 124, 157, 152, 174, 155, 171, 172, 148, 190, 133, 195, 139, 206, 136, 211, 119, 212, 113, 203, 96, 194, 83, 184, 72, 193, 64, 195, 59, 186, 62, 211, 40, 218, 30, 218, 18, 167, 25, 138" href="http://robinsonswoodcrafts.com/quilt-ladder.htm" shape="poly" />
<area coords="150, 63, 243, 74, 245, 88, 224, 93, 222, 136, 230, 166, 239, 184, 219, 192, 212, 231, 195, 233, 194, 242, 196, 251, 184, 258, 175, 261, 161, 292, 144, 299, 117, 290, 82, 270, 58, 263, 46, 238, 34, 222, 61, 215, 63, 197, 85, 188, 113, 205, 132, 216, 141, 205, 136, 199, 171, 177, 174, 157, 160, 147, 139, 117, 119, 107, 125, 92, 118, 71, 117, 62, 133, 63" href="http://robinsonswoodcrafts.com/Heart_Floor_quilt_holder.htm" shape="poly" />
</map>


<img id="Img1" alt="Shipping Estimates" height="436" src="http://robinsonswoodcrafts.com/images/fedex-map.gif" style="float: left" usemap="#ImgMap1" width="530" /></p>
<div id="Map1-0" class="tooltip" >
Tool tip 0
</div>

<div id="Map1-1" class="tooltip" >
Tool tip 1
</div>

<div id="Map1-2" class="tooltip" >
Tool tip 2
</div>


<script type="text/javascript">
/*<![CDATA[*/
// Simple Map Tooltip (08-October-2013)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/


var zxcMapToolTip={

 init:function(o){
  var id=o.MapID,t=o.EventType,ms=o.HideDelay,m=document.getElementById(id),s=document.getElementById(o.StickyID);
  if (m){
   var as=m.getElementsByTagName('AREA'),t=t||'mousemove',tt,a,z0=0;
   for (;z0<as.length;z0++){
    tt=document.getElementById(id+'-'+z0);
    if (tt){
     (s||document.body).appendChild(tt);
     tt.style.left='-3000px';
     tt.style.top='-3000px';
     a=[tt];
     this.addevt(as[z0],t,'pop',o,a);
     t=='mousemove'?this.addevt(tt,'mousemove','dly',o,a):null;
    }
   }
   o.t=t;
   o.s=s;
   o.ms=typeof(ms)=='number'&&ms>100?ms:null;
  }
 },

 pop:function(o,tt,e){
  var m=o.s?[0,0]:this.mse(e);
  o.tt&&o.tt!=tt?o.tt[0].style.top='-3000px':null;
  tt[0].style.left=m[0]+'px';
  tt[0].style.top=m[1]+'px';
  this.dly(o,tt);
  o.tt=tt;
  return o.t=='mousemove';
 },

 dly:function(o,tt){
  clearTimeout(tt[1]);
  o.ms?tt[1]=setTimeout(function(){ tt[0].style.top='-3000px'; },o.ms):null;
 },

 mse:function(e){
  var ds=!document.body.scrollTop?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop];
  return window.event?[e.clientX+ds[0],e.clientY+ds[1]]:[e.pageX,e.pageY];
 },

 addevt:function(o,t,f,p,p1){
  var oop=this;
  o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1,e);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); }):null;
 }


}

zxcMapToolTip.init({
 MapID:'Map0',         // the unique ID name of the image map.                    (string)
 StickyID:'StickyDiv', //(optional) the unique ID name sticky DIV.                (string, default = over the map area)
 EventType:'click',    //(optional) the event type to display the tool tip.       (string, default = mousemove)
 HideDelay:false       //(optional) the mouseout hide tool tip delay in millisec. (number, default = no hide)
});

zxcMapToolTip.init({
 MapID:'Map1',       // the unique ID name of the image map.                     (string)
 HideDelay:2000      //(optional) the mouseout hide tool tip delay in millisec.  (number, default = no hide)
});
/*]]>*/
</script>

</body>

</html>

**Trobin5544** · 10-08-2013, 03:43 PM

I don't have a moment right now to play with the script, But I did want to say Thank You. Trobin

**vwphillips** · 10-10-2013, 10:11 AM

questions received by email

The first is the position of the tool tip. Can we make each one be above or below or left of right of the pointer.

Second, How do I change the font size?

and how do I add cell padding, so the words are not right on the edge of the tool tip?

I've add three file to this email.. one is the pop-up.html and the other is the pop-up.js and cart option script.

I would also like your input on some more help.
The main reason for all these pop-up is because I haven't found anyone to help me add shipping to product option drop downs. I am currently using Mals e-commerce. http://www.mals-e.com/support.php Please if you have a moment, take a look and see what you think?

**vwphillips** · 10-10-2013, 10:52 AM

the position of individual tooltips can be specified by a CSS class rule

Code:

.tooltip {
  position:absolute;z-Index:101;left:-500px;top:-600px;
  width:180px;       /*Size of tool tip*/
  padding:5px;       /* the padding */
  font-Size:12px;    /* the font size */
  background-Color:#FFFFCC;border:solid red 1px;

}

.tooltip1 {
  margin-Left:10px; /* the X offset from the mouse */
  margin-Top:20px;   /* the Y offset from the mouse */
}

.tooltip2 {
  margin-Left:-10px; /* the X offset from the mouse */
  margin-Top:10px;   /* the Y offset from the mouse */
}

.tooltip3 {
  margin-Left:10px; /* the X offset from the mouse */
  margin-Top:20px;   /* the Y offset from the mouse */
}

.tooltip4 {
  margin-Left:-110px; /* the X offset from the mouse */
  margin-Top:20px;   /* the Y offset from the mouse */
}

.tooltip5 {
  margin-Left:-110px; /* the X offset from the mouse */
  margin-Top:20px;   /* the Y offset from the mouse */
}

.tooltip6 {
  margin-Left:-10px; /* the X offset from the mouse */
  margin-Top:-200px;   /* the Y offset from the mouse */
}

.tooltip7 {
  margin-Left:-10px; /* the X offset from the mouse */
  margin-Top:-200px;   /* the Y offset from the mouse */
}

the html

Code:

<div id="Map1-0" class="tooltip tooltip1" >
<b>Zone 1</b><br />
Estimated Ship Cost for<br />
Quilt Bars<br />
24 to 36 Inch long $13.75<br />
38 to 48 Inch long $14.30<br />
50 to 60 Inch long $17.25<br />
62 to 84 Inch long $23.50<br />
86 to 106 Inch long $24.50<br />
<b>Shipped by Fedex Ground.</b><br />
</div>

<div id="Map1-1" class="tooltip tooltip2" >
<b>Zone 2</b><br />
Estimated Ship Cost for<br />
Quilt Bars<br />
24 to 36 Inch long $13.25<br />
38 to 48 Inch long $17.50<br />
50 to 60 Inch long $18.90<br />
62 to 84 Inch long $25.50<br />
86 to 106 Inch long $27.60<br />
<b>Shipped by Fedex Ground.</b><br />
</div>

<div id="Map1-2" class="tooltip tooltip3" >
<b>Zone 3</b><br />
Estimated Ship Cost<br />
for Quilt Bars<br />
24 to 36 Inch long $13.50<br />
38 to 48 Inch long $17.70<br />
50 to 60 Inch long $18.25<br />
62 to 84 Inch long $23.60<br />
86 to 106 Inch long $28.50<br />
<b>Shipped by Fedex Ground.</b><br />
</div>

<div id="Map1-3" class="tooltip tooltip4" >
<b>Zone 4</b><br />
Estimated Ship Cost for<br />
Quilt Bars<br />
24 to 36 Inch long $16.50<br />
38 to 48 Inch long $18.75<br />
50 to 60 Inch long $19.85<br />
62 to 84 Inch long $26.70<br />
86 to 106 Inch long $29.80<br />
<b>Shipped by Fedex Ground.</b><br />
</div>

<div id="Map1-4" class="tooltip tooltip5" >
<b>Zone 5</b><br />
Estimated Ship Cost for<br />
Quilt Bars<br />
24 to 36 Inch long $16.75<br />
38 to 48 Inch long $17.50<br />
50 to 60 Inch long $17.75<br />
62 to 84 Inch long $26.50<br />
86 to 106 Inch long $28.50<br />
<b>Shipped by Fedex Ground.</b><br />
</div>

<div id="Map1-5" class="tooltip tooltip6" >
<b>Zone 6</b><br />
Estimated Ship Cost for<br />
Quilt Bars<br />
24 to 36 Inch long $15.50<br />
38 to 48 Inch long $18.75<br />
50 to 60 Inch long $21.25<br />
62 to 84 Inch long $22.50<br />
86 to 106 Inch long $34.50<br />
<b>Shipped by USPS, insur'd.</b><br />
</div>

<div id="Map1-6" class="tooltip tooltip7" >
<b>Zone 7</b><br />
Estimated Ship Cost for<br />
Quilt Bars<br />
24 to 36 Inch long $18.00<br />
38 to 48 Inch long $18.95<br />
50 to 60 Inch long $22.50<br />
62 to 84 Inch long $34.00<br />
86 to 106 Inch long CALL<br />
<b>Shipped by USPS.</b><br />
</div>

I am currently using Mals e-commerce

I suggest you use the Mals FAQ and forum for questions related the your cart