SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    97
    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,312
    Mentioned
    177 Post(s)
    Tagged
    8 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,488
    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 Enthusiast
    Join Date
    Aug 2009
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    THX

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    97
    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,312
    Mentioned
    177 Post(s)
    Tagged
    8 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,618
    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
  •