Cross Frame Tooltip - Desparately Need Help

katmac

12-01-2012, 04:38 PM

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.

donna1

12-02-2012, 03:46 AM

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

katmac

12-02-2012, 12:49 PM

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.

vwphillips

12-02-2012, 04:06 PM

<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
<!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">


<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

<!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>

donna1

12-02-2012, 08:56 PM

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 :thumbsup:

donna1

12-02-2012, 09:40 PM

Here is my canvas attempt!

<!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>

donna1

12-02-2012, 10:49 PM

@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?