SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2009
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image map on hover tooltip displays in another frame

    Hi

    My webpage is here:
    http://dgssi.com/barton/directory.html

    When someone hovers over a store name in the right frame, a tooltip shows up at a specified location
    in the left area (not a frame).

    Have tried a few javascripts, plus suggestions from other people, but nothing works.

    I am in a big big time crunch and need desparately to find an answer.

    Does anyone know if there is a jquery that would be able to do this?

    Thx

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    You can use SimpleTip to position ToolTips absolutely or relatively.
    Check out the demo page: http://craigsworks.com/projects/simpletip/

    Does that help?

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    frame set

    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="D01A.htm" NAME="SideMenu" SCROLLING=NO>
    <FRAME SRC="D01B.htm" NAME="MainTop" SCROLLING=YES>
    <NOFRAMES>
    <BODY>
    </BODY>
    </NOFRAMES>
    </FRAMESET>
    </HTML>
    D01A.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.MainTop;
     if (f&&f.Tip){
      f.Tip(id,ud)
     }
    }
    /*]]>*/
    </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="#" onmouseover="Tip('tst',true);" onmouseout="Tip('tst',false);" />
    
    
    
    
    		</map>
    
    </body>
    
    </html>
    D01B.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 tt=document.getElementById(id);
     if (tt){
      tt.style.visibility=ud?'visible':'hidden';
     }
    }
    /*]]>*/
    </script></head>
    
    <body>
    <div id="tst" style="visibility:hidden;">My Tool Tip</div>
    </body>
    
    </html>

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2009
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    THX

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2009
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Vic

    I need this script so that when you mouseover a store in the right frame it displays a tooltip on the left.

    K

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by kath View Post
    I need this script so that when you mouseover a store in the right frame it displays a tooltip on the left.
    Hi,
    It seems that your problem is being caused by the fact that content in your iframe, like your tooltip <div> can't spill over onto the main page, as you want.
    So, approaching this problem from a different angle: is there any reason that the store listing needs to be in an iframe?
    You could achieve exactly the same effect by using a div and setting its overflow properties correspondingly.
    If you had everything on the same page, then your problem with the positioning of the tooltips would be solved.

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Like pullo said, ditch the frame if you can and simply put it all in a div and position the tooltips via absolute positioning. Very easy.


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
  •