Results 1 to 5 of 5

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

  1. #1
    Join Date
    Oct 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,807
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Oct 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,807
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    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?
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,807
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    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
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Similar Threads

  1. Replies: 6
    Last Post: 10-13-2012, 05:59 PM
  2. Replies: 1
    Last Post: 06-12-2012, 08:31 PM
  3. Highlight Script for a spot on an Image
    By geldesignsgroup in forum JavaScript
    Replies: 1
    Last Post: 02-10-2010, 08:05 AM
  4. Help making Balloon tooltip work with an image
    By cclivo in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 02-13-2007, 09:27 PM
  5. Mouse over image swap on hot spot
    By barge1 in forum HTML
    Replies: 2
    Last Post: 01-10-2005, 04:47 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •