DHTML rollover menu not disappearing on mouse out

[redsand198]

Below is the link to my company's site i've developed:

http://www.avinternational.net

Could someone help me get my rollover menus to disappear on mouse-out? They seem to stick to the screen even after your mouse has moved off them, and I can't figure it out


thank you very much!

[ivars]

You have logic for the link that says what to do when the mouse is placed over it (onmouseover), but you are missing a similar instruction for when the mouse is removed (onmouseout) that would hide the layer that you had just displayed.

[redsand198]

would this line of code work?

<div id="topmenu_1" class = "topmenu1">
<a href="services.html" class="hrefmenu" onmouseover="showDivs('submenu_',1); return false;" onmouseout="hideDivs('submenu_',1); return false;"><b>Services</b></a><br>
</div>

[ivars]

Yes... except that you do not yet have a hideDivs function. I modified the code from the showDivs function for you (it is at the end of this post). You will need to paste this new function into your page also.

---------------------------------------

function hideDivs (divName,divNumber) {
var divsUsed = 8; // this is the number of divs we have in the document for each element(topmenu, submenu, contentArea, contentImage)
if (navigator.appName.indexOf ("Microsoft") == 0 || navigator.appName.indexOf ("Netscape") == 0) {
if (parseInt (navigator.appVersion) >= 4) {
var cnt = 0;
for (cnt = 1; cnt <= divsUsed; cnt++) {
var divCheck = divName + cnt;
var divShow = divName + divNumber;
if (ie) {
document.all(divCheck).style.visibility = hidden;
}
if (n) {
document.layers[divCheck].visibility = hidden;
}
}
}
}
}

[redsand198]

that works, but it makes my submenus disappear on mouse-out from the regular menu link, i want to be able to have the submenu disappear on mouseout of the submenu

is that possible?

[redsand198]

i defined this code up in my script:

<script language="javascript">
// Courtesy of SimplytheBest.net (http://simplythebest.net/info/dhtml_scripts.html)
<!--
if (document.layers) {
visible = 'show';
hidden = 'hide';n=1;ie=0;
} else if (document.all) {
visible = 'visible';
hidden = 'hidden';n=0;ie=1;
}
function showDivs (divName,divNumber) {
var divsUsed = 8; // this is the number of divs we have in the document for each element(topmenu, submenu, contentArea, contentImage)
if (navigator.appName.indexOf ("Microsoft") == 0 || navigator.appName.indexOf ("Netscape") == 0) {
if (parseInt (navigator.appVersion) >= 4) {

var cnt = 0;
for (cnt = 1; cnt <= divsUsed; cnt++) {
var divCheck = divName + cnt;
var divShow = divName + divNumber;
if (ie) {
if (divCheck == divShow)
document.all(divShow).style.visibility = visible;
else
document.all(divCheck).style.visibility = hidden;
}
if (n) {
if (divCheck == divShow)
document.layers[divShow].visibility = visible;
else
document.layers[divCheck].visibility = hidden ;
}
}
}
}
}
function hideDivs (divName,divNumber) {
var divsUsed = 8; // this is the number of divs we have in the document for each element(topmenu, submenu, contentArea, contentImage)
if (navigator.appName.indexOf ("Microsoft") == 0 || navigator.appName.indexOf ("Netscape") == 0) {
if (parseInt (navigator.appVersion) >= 4) {
var cnt = 0;
for (cnt = 1; cnt <= divsUsed; cnt++) {
var divCheck = divName + cnt;
var divShow = divName + divNumber;
if (ie) {
document.all(divCheck).style.visibility = hidden;
}
if (n) {
document.layers[divCheck].visibility = hidden;
}
}
}
}
}

var ver = parseFloat (navigator.appVersion);
if ((navigator.appName.indexOf ("Netscape") == 0) && (ver >= 4)) {
} else if ((navigator.appName.indexOf ("Mozilla") == 0) && (ver >= 5)) {
} else if ((navigator.appName.indexOf ("Microsoft") == 0) && (ver >= 4)) {
} else {
location="http://www.google.com";
}
// -->
</script>


--------------------------------------------------------------------------------------------------------------------------------------------

now, in my table, i call for this:

<DIV class=submenu2 id=submenu_2 style="background-color:#cccccc;" onmouseout="Hide('submenu_2')">
<table border="0" width="137" cellspacing="0" cellpadding="2" bgcolor="#cccccc">
<tr><td>
<A class=hrefsubmenu href="avc.html"><b>AV Consultants, Inc.</b></A><br>
<A class=hrefsubmenu href="avib.html"><b>AVI Benefits, LLC</b></A><br>
<A class=hrefsubmenu href="crs.html"><b>Consolidated Risk Services</b></A><br>
<A class=hrefsubmenu href="crsny.html"><b>CRS of New York</b></A><br>
<A class=hrefsubmenu href="avim.html"><b>AVI Midwest, LLC</b></A><br>
<A class=hrefsubmenu href="aviw.html"><b>AVI West Coast, Inc.</b></A><br>
</td></tr>
</table>

--------------------------------------------------------------------------------------------------------------------------------------------

but the onmouseout command does not work. i remove the entire command from above and it also does not work

i want to be able to mouse from the main menu to the submenu, then when i move off the submenu, the submenu disappears

thank you very much!

[PeOfEo]

why are we using document.all here? It is going to fail for non ie browsers, isnt it?
document.getElementById(divshow).style.visibility= "visible";
this is better accepted, ditch the document.all, then you can take out that browser check stuff because this will work for ie and ns and opera etc all at the same time. Here is an example, very simple drop down http://paxonradio.vze.com I was going to use this site but now it looks like I will not so feel free to torture the source any way you like, including jacking the drop down menus and repositioning them to by fly out if you like.
Also and in your script whats with this
location="http://www.google.com"; ? surely you are not just ditching non compliant users :rolleyes: