hover menu problem
Posted: Thu Oct 09, 2003 2:57 am
> In advance, thank you for any help that can be offered to me <
Having trouble with hover layers to display menus.
One menu does not appear until linked to, but one menu's CSS class is permanently displayed - but only shows data when the link is selected.
Why oh why, can these just not stay hidden as intended.
Script for layers:
layers in BODY of script:
relevant CSS classes:
Having trouble with hover layers to display menus.
One menu does not appear until linked to, but one menu's CSS class is permanently displayed - but only shows data when the link is selected.
Why oh why, can these just not stay hidden as intended.
Script for layers:
Code: Select all
<script language="JavaScript">
<!--
var NN4 = document.layers? true : false;
var IE4 = document.all? true : false;
var left;
var top;
function display(layerName) {
if (IE4) {
document.allїlayerName].style.pixelLeft = left + 25;
document.allїlayerName].style.pixelTop = top;
document.allїlayerName].style.visibility = "visible";
}
else if(NN4) {
document.layersїlayerName].left = left + 25;
document.layersїlayerName].top = top;
document.layersїlayerName].visibility = "show";
}
}
function hide() {
if (IE4) {
document.allї'layer1'].style.visibility = "hidden";
document.allї'layer2'].style.visibility = "hidden";
}
else if(NN4) {
document.layersї'layer1'].visibility = "hidden";
document.layersї'layer2'].visibility = "hidden";
}
}
function setMouseCoordinate(e) {
if (NN4) {
left = e.pageX;
top = e.pageY;
}
else if (IE4) {
left = document.body.scrollLeft + event.clientX
top = document.body.scrollTop + event.clientY
}
}
if (NN4)
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = setMouseCoordinate;
// -->
</script>Code: Select all
<div class="whiteMENU2">
<font class="arialsmB">
<div id="layer1" style="VISIBILITY:hidden;">
<script language="JavaScript">
<!--
if (NN4 || IE4) {
document.write("<table border="0" bgcolor="white" cellspacing="0" CELLPADDING="0">");
document.write("<tr><td>");
document.write("<table>");
document.write("<tr><td><a href="JS/intro.html">Introduction To toads</a></td></tr>");
document.write("<tr><td><a href="JS/array.html">Arrays of toads</a></td></tr>");
document.write("<tr><td><a href="JS/JSSpec.html">Specifications of toads</a></td></tr>");
document.write("<tr><td><a href="JS/advJS.html">Advanced toads</a></td></tr>");
document.write("</table>");
document.write("</td></tr>");
document.write("</table>");
}
// -->
</script>
</div>
</div>
</font>
<div class="whiteMENU">
<font class="arialsmB">
<div id="layer2" style="VISIBILITY:hidden;">
<script language="JavaScript">
<!--
if (NN4 || IE4) {
document.write("<a href="JS/intro.html">pageONE</a>");
document.write("<a href="JS/array.html">pageTWO</a>");
document.write("<a href="JS/JSSpec.html">pageTHREE</a>");
document.write("<a href="JS/advJS.html">pageFOUR</a>");
}
// -->
</script>
</div>relevant CSS classes:
Code: Select all
.whiteMENU
{
position:absolute;
padding:0px;
overflow:visible;
top:2%;
right:12.5%;
border:0px solid #FFFFFF;
z-index:6;
background: #A9B748;
}
.whiteMENU2
{
position:absolute;
padding:0px;
overflow:visible;
top:8.5%;
right:1.5%;
border:0px solid #FFFFFF;
z-index:5;
background: #FFFFFF;
font-family : Arial, Helvetica, sans-serif;
font-size : 10px;
FILTER: alpha(opacity=90)
}