Links not working in dynamically generated menu

[doccee]

I'm creating what should be a very simple popup menu script for a client, using a visibility switch on an existing div and writing the content to the div from a selected string, so the client can enter menu parameters easily. The menus are generating and positioning correctly, but the links generated aren't functioning properly. More details on what it's doing below.

Here's the navigation.js file:

var onImg;
var imgID, pic, loc;
var toppos, leftpos, active, offpic;
var menu_content='';

function goTo(loc){
	document.location=loc;
}

function show(toppos,leftpos,active,imgID,pic,offpic){
	var active_menu=eval('menu'+active);
	var active_labels=eval('labels'+active);
	menu=(active_menu.split(","));
	labels=(active_labels.split(","));
	menu_content="<div onMouseOver=\"show('"+toppos+"','"+leftpos+"','"+active+"','"+imgID+"','"+pic+"');\" onMouseOut=\"hide('"+imgID+"','"+offpic+"');\">";
	menu_content+='<table cellpadding=0 cellspacing=0 border=0 style="border-collapse:collapse;" class="menu">';
	for (i in menu){
		menu_content+='<tr><td class="choice">';
		menu_content+='<a href="'+menu[i]+'" onClick="goTo(\''+menu[i]+'\'); return false;" class="choice">'+labels[i]+'</a><br>';
		menu_content+='</td></tr>';
	}
	menu_content+='</table></div>';
	
//	document.write(menu_content);

	document.getElementById('a_menu').style.top=toppos+'px';
	document.getElementById('a_menu').style.left=leftpos+'px';
	document.getElementById('a_menu').innerHTML=menu_content;
	document.getElementById('a_menu').style.visibility='visible';
	document.getElementById(imgID).src='assets/'+pic;
	menu_content = '';
}

function hide(imgID,pic){
		document.getElementById('a_menu').style.visibility='hidden';	
		document.getElementById(imgID).src='assets/'+pic;
}

The menu strings are input by the client in another js file:

<!--

menu1='mouth.htm,nose.htm,ear.htm';
labels1='MOUTH,NOSE,EAR';

menu2='cervical_spine.htm,throat.htm';
labels2='SPINE,THROAT';

//-->

And here's the CSS for the layers:

.menu {
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
background-color:#555555;
border-left:#777777 1px solid;
border-top:#777777 1px solid;
border-right:#777777 1px solid;
border-bottom:#777777 1px solid;
text-align:center;
padding:0;
width:100;
line-height:13px;
}
.choice {
width:100%;
border-bottom:#777777 1px solid;
border-right:#777777 1px solid
}
a {
font-family:Arial,Helvetica,sans-serif;
color:#0000FF;
background-color:#FFFFFF;
text-decoration:none
}
a:visited {
font-family:Arial,Helvetica,sans-serif;
color:#0000FF;
background-color:#FFFFFF
}
a:hover {
font-family:Arial,Helvetica,sans-serif;
color:#FF0000;
background-color:#FFFFFF
}
#a_menu {
	visibility:hidden;
	position:absolute;
	background-color:#FFF;
}

There are 2 problems actually occurring. The links in the menus don't operate as they should, although I've used the document.write you can see commented out to validate the HTML code in the menus and it's fine. Clicking on a link, however, only flashes the link in the status bar and doesn't go anywhere. Oddly enough, right-clicking on a link and selecting the options from the menu does work.

The second problem is that the mouseout from a menu should hide the menu and perform an image swap, which works correctly on the page menus, but not on the generated menus.

The test page for this is online at http://patientpal.com/test.htm and only the HEAD and NECK menus are active at this time. Note that the menus and image rollover effects work from both the sidebar menu and the illustration.

I'm a PHP and Perl programer, with a little bit of JavaScript exeperience, so I'm probably missing something obvious here. Any help will be greatly appreciated.

Thanks,
Doc

[subhailc]

why do you have an onclick with location and an href? why not just the href?

[doccee]

The onClick was added to see if it would work while the href wasn't. It does the same thing without it.

[vwphillips]

being blunt this script is awfull

but

function goTo(loc){
alert(loc);
//	document.location=loc;
}

function show(toppos,leftpos,active,imgID,pic,offpic){
	var active_menu=eval('menu'+active);
	var active_labels=eval('labels'+active);
	menu=(active_menu.split(","));
	labels=(active_labels.split(","));
	menu_content="<div onmouseover=\"clearTimeout(TO);\" onmouseout=\"hide();\">";
	menu_content+='<table cellpadding=0 cellspacing=0 border=0 style="border-collapse:collapse;" class="menu">';
	for (i in menu){
		menu_content+='<tr onClick="goTo(\''+menu[i]+'\');"><td class="choice">';
		menu_content+='<a class="choice">'+labels[i]+'</a><br>';
		menu_content+='</td></tr>';
	}
	menu_content+='</table></div>';

//	document.write(menu_content);
    var mmmm=document.getElementById('a_menu')
	mmmm.style.top=toppos+'px';
	mmmm.style.left=leftpos+'px';
	mmmm.innerHTML=menu_content;
	mmmm.style.visibility='visible';
	document.getElementById(imgID).src='assets/'+pic;
	menu_content = '';
}

var TO;
function hide(imgID,pic){
	   TO=setTimeout('document.getElementById(\'a_menu\').style.visibility=\'hidden\';',200);
if(imgID){
		document.getElementById(imgID).src='assets/'+pic;
}
}

there are many tooltip scripts available, google and have a look at some of those
or have a look at my site and search for tooltip