Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Aug 2012
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cross Frame Tooltip - Desparately Need Help

    Hi

    I have this page and there is 2 frames
    1 with the map and 1 with a list of stores.

    I am trying to find a script so that when I mouseover a store name in the right frame, a tooltip will be displayed in the left frame.

    If someone could help me out with this.

  • #2
    New Coder donna1's Avatar
    Join Date
    Nov 2012
    Location
    london
    Posts
    99
    Thanks
    9
    Thanked 4 Times in 4 Posts
    have an array of x,y values which correspond to the map positions.
    so when you click on store n
    you draw a cross or circle at point x[n],y[n] on the map.

    html allows a canvas and the line or arc draw functions to do this

  • #3
    New Coder
    Join Date
    Aug 2012
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Donna

    Thanks for your help.
    So I need to be able to draw a box at a specified location on the map
    This box will have a bunch of text in it. I can use 4 coordinates then?
    Would I need 5 arrays, 1 for store name, then the 4 for the coordinates?

    Also, I looked up html canvas and didn't see any examples where I could put text in here
    or if this will work across frames.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,501
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <HTML>
    <HEAD>
    <META NAME="DESCRIPTION" CONTENT="Design & manufacture of GRP and metal fabrications for motorcycles & sidecars to your specific requirements.">
    <META NAME="KEYWORDS" CONTENT="Motorcycle,Sidecar,Outfit,Glass,Fiber,GRP,Mudguard,Luggage,Pannier,Fairing,Trailer,JZR,Lomax,Vincent,Welding,Fabrication,Stieb,Modification">
      <META NAME="GENERATOR" CONTENT="Adobe PageMill 3.0 Win">
      <TITLE>West Country Sidecars</TITLE>
    </HEAD>
    <FRAMESET framespacing="0" FRAMEBORDER=0 COLS="50%,*">
    <FRAME SRC="D02A.htm" NAME="SideMenu" SCROLLING=NO>
    <FRAME SRC="D02B.htm" NAME="MainTop" SCROLLING=YES>
    <NOFRAMES>
    <BODY>
    </BODY>
    </NOFRAMES>
    </FRAMESET>
    </HTML>
    D02A.htm
    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[*/
    .tt {
      position:absolute;z-Index:101;visibility:hidden;left:20px;top:20px;width:100px;height:50px;background-Color:#FFFFCC;
    }
    
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Tip(id,ud){
     var tt=document.getElementById(id);
     if (tt){
      tt.style.visibility=ud?'visible':'hidden';
     }
    }
    /*]]>*/
    </script>
    </head>
    
    <body>
    		<img src="http://dgssi.com/barton/images/mall-map-new.jpg" width="665" border="0" usemap="#Map2Map" /><br/>
    
                    <map name="Map2Map" id="Map2Map">
    
    		<!-- C1 - METRO -->
    		<area shape="rect" coords="0,0,60,60" href="#" />
    
    
    
    
    		</map>
    <div id="tst1" class="tt" >My Tool Tip 1</div>
    <div id="tst2" class="tt" style="left:120px;top:120px;" >My Tool Tip 2</div>
    <div id="tst3" class="tt" style="left:220px;top:220px;" >My Tool Tip 3</div>
    
    </body>
    
    </html>
    D02B.htm

    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>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Tip(id,ud){
     var f=window.parent.SideMenu;
     if (f&&f.Tip){
      f.Tip(id,ud)
     }
    }
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    
    <a href="#" onmouseover="Tip('tst1',true);" onmouseout="Tip('tst1',false);">Store 1</a>
    <br />
    <br />
    <a href="#" onmouseover="Tip('tst2',true);" onmouseout="Tip('tst2',false);">Store 2</a>
    <br />
    <br />
    <a href="#" onmouseover="Tip('tst3',true);" onmouseout="Tip('tst3',false);">Store 3</a>
    <br />
    <br />
    </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/

  • #5
    New Coder donna1's Avatar
    Join Date
    Nov 2012
    Location
    london
    Posts
    99
    Thanks
    9
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by katmac View Post
    So I need to be able to draw a box at a specified location on the map
    This box will have a bunch of text in it. I can use 4 coordinates then?
    Would I need 5 arrays, 1 for store name, then the 4 for the coordinates?
    Well if the boxes are a fixed size you would only need to store the top x,y corner so just 2 coordinates

    @VWP - your code is Ammaaazzzziiinnnngg! You are a coding machine

  • #6
    New Coder donna1's Avatar
    Join Date
    Nov 2012
    Location
    london
    Posts
    99
    Thanks
    9
    Thanked 4 Times in 4 Posts
    Here is my canvas attempt!
    Code:
    <!DOCTYPE HTML>
    <html>
    <body>
    <canvas id="myCanvas" width="800" height="600">>Your browser does not support the canvas tag.</canvas>
    <script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    
    var stores = ["Handbags","Hairdressers","Clothes","McDonalds"];
    var storex = [50,200,510,300];
    var storey = [400,100,50,200];
    var i=0;
    
    function displayStore(){
     canvas.width=canvas.width;
     ctx.beginPath();
     ctx.rect(storex[i],storey[i],75,25);
     ctx.closePath();
     ctx.stroke();
     ctx.fillText(stores[i],storex[i]+5,storey[i]+15);
    }
    
    function rotateStores(){
     displayStore();
     i++;
     if(i==stores.length){ i=0;}
    }
    
    setInterval("rotateStores()",1000);
    
    </script>
    </body>
    </html>
    Last edited by donna1; 12-02-2012 at 10:33 PM.

  • #7
    New Coder donna1's Avatar
    Join Date
    Nov 2012
    Location
    london
    Posts
    99
    Thanks
    9
    Thanked 4 Times in 4 Posts
    @VWPhillip

    What does /*]]>*/ do in your code

    I tried your example, map and stores come up but nothing happens when I click on any of the 3 links?


  •  

    Posting Permissions

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