What you seem to be describing is:
<TABLE style="WIDTH: 900px" align=center>
<TBODY align: center>
<TR align=center>
<TD align=center>
<DIV class="gwhomeMenu">
<DIV class= "horz_menu">
<A id=gwhomeMenu_home href="WelcometoGoodwoods.htm">Home</A>
<A id=gwhomeMenu_aboutus href="AboutGoodWoods.htm">About Us</A>
<A id=gwhomeMenu_products href="ProductsGoodWoods.htm">Products</A>
<A id=gwhomeMenu_services href="ServicesGoodWoods.htm">Services</A>
<A id=gwhomeMenu_contactus href="ContactGoodWoods.htm">Contact Us</A>
<BR>
</DIV>
</DIV>
</TD>
</TR>
<TR>
<TD height="50"></TD>
</TR>
</TBODY>
</TABLE>
Which displays a menubar, with text that changes color, a background image of the button that changes, all onMouseOver.
These functions are from a .js file that I wrote, that was based on another sample. The functions below work with the code above, to display the menu-bar. Properly coded, it will display vertical sub menus-related to the horizontal bar button, with each vertical sub-menu button capable of generating sub horizontal buttons etc.
{
var win = window.open();
for (var i in x) win.document.write(i+' = '+x[i]+'<br>');
}
var vhmen_timeout = 50;
function vhmen_show_aux(parent, child)
{
var p = document.getElementById(parent);
var c = document.getElementById(child);
p.className = "active";
if (c.offsetWidth <= 0)
{
c.style.position = "absolute";
c.style.visibility = "visible";
c.style.display = "block";
}
var direction = undefined;
if (p.parentNode && p.parentNode["vhmen_position"] == "x")
direction = p.parentNode["vhmen_direction"];
var top = (c["vhmen_position"] == "y") ? p.offsetHeight : 0;
var left1 = (c["vhmen_position"] == "x") ? p.offsetWidth : 0;
var left2 = (c["vhmen_position"] == "x") ? -c.offsetWidth : 0;
var left3 = (c["vhmen_position"] == "x") ? p.offsetWidth : 0;
for (; p; p = p.offsetParent)
{
if (p.style.position != 'absolute')
{
left1 += p.offsetLeft;
left2 += p.offsetLeft;
top += p.offsetTop;
}
left3 += p.offsetLeft;
}
if (direction)
{
left = (direction == 'right') ? left1 : left2;
c['vhmen_direction'] = direction;
}
else
{
left = (left3+c.offsetWidth < document.body.offsetWidth) ? left1 : left2;
c['vhmen_direction'] = (left3+c.offsetWidth < document.body.offsetWidth) ? 'right' : 'left';
}
c.style.align = "center";
c.style.position = "absolute";
c.style.visibility = "visible";
c.style.display = "block";
c.style.top = top +'px';
c.style.left = left + 'px';
}
function vhmen_hide_aux(parent, child)
{
document.getElementById(parent).className = "parent";
document.getElementById(child ).style.visibility = "hidden";
document.getElementById(child ).style.display = "block";
}
function vhmen_show(e)
{
var p = document.getElementById(this["vhmen_parent"]);
var c = document.getElementById(this["vhmen_child" ]);
vhmen_show_aux(p.id, c.id);
clearTimeout(c["vhmen_timeout"]);
}
function vhmen_hide()
{
var c = document.getElementById(this["vhmen_child"]);
c["vhmen_timeout"] = setTimeout("vhmen_hide_aux('"+this["vhmen_parent"]+"','"+this["vhmen_child" ]+"')", vhmen_timeout);
}
function vhmen_attach(parent, child, position)
{
p = document.getElementById(parent);
c = document.getElementById(child );
p["vhmen_child"] = c.id;
c["vhmen_child"] = c.id;
p["vhmen_parent"] = p.id;
c["vhmen_parent"] = p.id;
c["vhmen_position"] = position;
p.onmouseover = vhmen_show;
p.onmouseout = vhmen_hide;
c.onmouseover = vhmen_show;
c.onmouseout = vhmen_hide;
}
function gwwebmenu_build_aux(parent, child, position)
{
document.getElementById(parent).className = "parent";
document.write('<div class="vert_menu" id="'+parent+'_child">');
var n = 0;
for (var i in child)
{
if (i == '-')
{
document.getElementById(parent).href = child[i];
continue;
}
if (typeof child[i] == "object")
{
document.write('<a class="parent" id="'+parent+'_'+n+'">'+i+'</a>');
gwwebmenu_build_aux(parent+'_'+n, child[i], "x");
}
else document.write('<a id="'+parent+'_'+n+'" href="'+child[i]+'">'+i+'</a>');
n++;
}
document.write('</div>');
vhmen_attach(parent, parent+"_child", position);
}
function gwwebmenu_build(menu)
{
for (var i in menu) gwwebmenu_build_aux(i, menu[i], "y");
}
When trying to debug your page it is helpful to indent your code and make sure to have matching identification areas.
Submit an article or tip