mouseout event menu [Archive]

leonard905

08-10-2004, 09:00 AM

Hi all,

I have a main menu with submenu. Onmouseover on the main menu the submenu (a table) is display using document.getelementbyid(objname).style.visibility="visible". When mouseout oon the submenu, I want to set the visibility to hidden. I haven't been successful in doing this. See code below:

++++++++++++++++Begin+++++++++++++++++++++
<style>
a.menulinks:link{text-decoration:none;}
a.menulinks:visited{text-decoration:none;color:#000000;}
a.menulinks:active{text-decoration:none;color:#000000;}
.tabstyle {
display:block;
border:solid black 1.5px;
text-decoration:none;
font-size:9.5pt;
font-family:arial;
font-weight:normal;
color:000033;
background:#F5F5F5;
width:130;
position:absolute;
top:126px;
left:110px;
}
.menuhead{
color:#000033;
background:#BCBCBC;
font-size:12.5px;
font-weight:700;
font-family:Arial;
width:100%;
}
.submenu {
position:absolute;
left: 235 px;
background:#C5C5C5;
width:130px;
visibility:hidden;
border:solid black 1.5px;
}

.submenutab {
font-weight:normal;
font-size:8.5pt;
font-family:arial;
color:000033;
}
</style>
<script>
function displaymenu(obj_name,obj_id) {
if (document.getElementById){
if (obj_name == "Apps1") {
document.getElementById(obj_name).style.border="solid 1.0px"
document.getElementById(obj_name).style.visibility="visible"
document.getElementById(obj_name).style.top="155 px"
}
}
}

function hidemenu(obj_name,obj_id) {
if (document.getElementById){
if (obj_name == "Apps1") {
document.getElementById(obj_name).style.visibility="hidden"
}
}
}
function over_submenu(obj_name) {
obj_name.style.borderRight="solid thin";
obj_name.style.borderLeft="solid thin";
obj_name.style.borderRightColor="#FFFFFF";
obj_name.style.borderLeftColor="#FFFFFF";
obj_name.style.borderLeftWidth="1.0px";
obj_name.style.borderRightWidth="1.0px";
}

function out_submenu(obj_name) {
obj_name.style.border="none";
}

</script>
<body>
<div id="MainMenu" class="divstyle">
<table class="tabstyle">
<tr>
<td class="menuhead">Application Menu<td></tr>
<tr>
<td><a class="menulinks" href="#" onmouseover="displaymenu('Apps1',this);" onmouseout="hidemenu('Apps1', this);">Apps1</a>
<td>
</tr>
</table>
<div id="Apps1" class="submenu">
<table class="submenutab">
<tr>
<td onMouseover="over_submenu(this)" onMouseout="out_submenu(this)">
<a class="menulinks" href="#">App</a>
<td>
</tr>
<tr>
<td onMouseover="over_submenu(this)" onMouseout="out_submenu(this)">
<a class="menulinks" href="#">User Guides</a>
<td>
</tr>
<tr>
<td onMouseover="over_submenu(this)" onMouseout="out_submenu(this)">
<a class="menulinks" href="#">FAQ</a>
<td>
</tr>
</table>
</div>
+++++++++++++++++++++END +++++++++++++++++++++++++++++++++