Image map on hover tooltip displays in another frame

**kath** · Dec 1, 2012 07:50

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

**Pullo** · Dec 1, 2012 08:02

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?

**vwphillips** · Dec 1, 2012 08:38

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>

**kath** · Dec 1, 2012 08:54

THX

**kath** · Dec 1, 2012 10:36

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

**Pullo** · Dec 1, 2012 14:56

Originally Posted by kath

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.

**PicnicTutorials** · Dec 1, 2012 21:05

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.

User Tag List

Thread: Image map on hover tooltip displays in another frame

Thread Tools

Display

Image map on hover tooltip displays in another frame

Bookmarks

Bookmarks

Posting Permissions