events in dynamically created layer/determining table height

ROB posted this at 21:06 — 12th April 2001.

Joined: Oct 1999

hi. i have some questions in reference to this page: http://www.asylumnation.com/map/northamerica.html
the javascript for the page is here: http://www.asylumnation.com/map/map.js

basically this page is a image map of a US Map. when you mouse over a city a list of names of people who live there pops up.

a quick rundown on how it works:
-a layer, called listLyr is created onLoad.
-mousemove events are captured and coords are stored in a global object.
-when the mouseover event occurs on a city a table containing the city name and residents is written to listLyr, then listLyr is positioned to the mouse coords, then listLyr is made visible.
-onmouseout listLyr is hidden

now what i want to do is make the peoples names in the popup clickable ie: links. to do this i cant hide the listLyr onmouseout of the city, because they cant click a name if it disappears when they move their mouse off the city.

so heres my idea on how to approach this. in the HideIt() function, which just hides listLyr, i would need to test to see if the cursor was over the popup. id also have to call HideIt() onmouseout of listLyr, which is one of my problems (capturing a mouseout event on a dynamically created layer)

another problem is just because the mouse is over the layer doesnt mean the mouse is over the table. the layer is always 300px high, but if theres only one entry in the table the visible popup may only be 20px high. i suppose i could make a guess by multiplying the number of entries by 5px or about however high a line is but if anyone knows a better way to determine the height of the table let me know. the width isnt a prob because the table is always the same width as the layer.

once i can figure out the exact size of the table i probably wont need the onmouseout event for listLyr. ill determine the screen coords of the table using the left and top properties of listLyr and the height and width of the table. on the mouse move event ill test to see if the mouse is in this area, and if its not hide the layer.

so i guess my questions are:
is there an easy way to determine the height of a table?
how do i act on a mouseover or mouseout event for a dynamically created layer? (ie the pointer moves over/off the layer)
am i taking the right approach?

heres the code so you dont have to download the file:

//map.js

var theList;
var curPos = new Object();
curPos.x = curPos.y = 0;

var lyrWidth = 160;
var lyrHeight = 300;

var isIE = navigator.appName.indexOf('Microsoft') >= 0;
var isNS = navigator.appName.indexOf('Netscape') >= 0;

var isDynBrowser = document.layers || document.all ? true : false;


if(!isDynBrowser) alert("You are using an older browser that does not support layers.\n"
	+ "This page will not function as intended.\n"
	+ "Please upgrade your browser to the current version.");
else if(isIE) document.onmousemove = TrackCoords;
else
{	window.captureEvents(Event.MOUSEMOVE);
	window.onmousemove = TrackCoords;
}

function CreatePopupLayer()
{	if(isNS)
	{	var lyr = document.layers['listLyr'] = new Layer(lyrWidth);
		document.listLyr = lyr;
		lyr.name = 'listLyr';
		lyr.clip.height = lyrHeight;
		lyr.left = 0;
		lyr.top = 0;
		lyr.visibility = 'hide';

		theList = document.listLyr;
	}
	else
	{	var str = '\n<DIV ID="listLyr" STYLE="';
		str += 'position:absolute; ';
		str += 'width:' +lyrWidth+ '; ';
		str += 'height:' +lyrHeight+ '; ';
		str += 'clip:rect(0,' +lyrWidth+ ',' +lyrHeight+ ',0); ';
		str += 'left:0; ';
		str += 'top:0; ';
		str += 'visibility:hidden;';
		str += '"></DIV>';

		document.body.insertAdjacentHTML("BeforeEnd",str);
		theList = listLyr.style;
	}
}

function ShowIt(city,people)
{
	var peopleList = new Array();
	pplList = people.split(',');

	var theHtml = '<TABLE CLASS="top" WIDTH="' +lyrWidth+ '" BORDER="0" CELLPADDING="2" CELLSPACING="0">';
	theHtml += '<TR><TD><TABLE CLASS="top" WIDTH="100%" BORDER="0" CELLPADDING="0" CELLSPACING="0">';
	theHtml += '<TR><TD ALIGN="center" NOWRAP>';
	theHtml += '<SPAN CLASS="head">';
	theHtml += city;
	theHtml += '</SPAN></TD></TR></TABLE>';
	theHtml += '<TABLE CLASS="bot" WIDTH="100%" BORDER="0" CELLPADDING="2" CELLSPACING="0">';

	for(var z=0; z< pplList.length; z++)
	{	theHtml += '<TR><TD NOWRAP><A CLASS="entry" HREF="#">';
		theHtml += pplList[z];
		theHtml += '</A></TD></TR>';
	}

	theHtml += '</TABLE></TD></TR></TABLE>';


	if(isIE) document.all("listLyr").innerHTML = theHtml;
	else
	{	theList.document.open();
		theList.document.write(theHtml);
		theList.document.close();
	}

	var x = curPos.x;
	var y = curPos.y;

	x -= lyrWidth / 2;
	y += 15;

	theList.left = x;
	theList.top = y;
	theList.visibility = (isIE) ? 'visible' : 'show';

}

function HideIt()
{
	theList.visibility = (isIE) ? 'hidden' : 'hide';
}

function TrackCoords(e)
{
	curPos.x = isIE ? event.clientX : e.pageX;
	curPos.y = isIE ? event.clientY : e.pageY;
}

detox posted this at 14:20 — 16th April 2001.

They have: 571 posts

Joined: Feb 2001

I would think the easiest way to do this is with a tool tip. Yoiu can trigger them off just about anything, so of an image map should be easy.
Just do a search on javascript tooltips and go from there. I have done this, but the code went when I left my last job. DAMN DAMN DAMN!!!!
I have now learnt to back up my code library at work!

Mark Hensler posted this at 03:49 — 17th April 2001.

He has: 4,048 posts

Joined: Aug 2000

You could try playing with the title property. You can attatch it to nearly any HTML tag.

<html> 
<head>
<title>test page</title>
</head>
<body onLoad="test.title='line\nbreak'">

<div title="my title tag" id=test>
blah blah blah
</div>

</body> 
</html>

Mark Hensler
If there is no answer on Google, then there is no question.