Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Menu Mouse-over wont hang around

Status
Not open for further replies.
Guest_imported

Guest_imported

New member
Jan 1, 1970
0
I am using the code below to include a drop-down menu into my site. The problem is that when i add a table into the layer container to display text and graphics the menu displays on mouse-over but wont stay onscreen when the mouse is kept on top of the menu box. In the following example code i have modified the first layer and added a table with links in it........the other layers have been left with the hyperlinks only/no table.......even with these other layers, the mouse must be on the actual links to keep the menu onscreen. Is there a way to keep the menu layer displayed when the mouse is placed anywhere within the menu box?................Can you Please help???

P.S. It must be able to run in both IE6 & netscape 6.2



<html>

<head>

<STYLE>
#layer1 {
background-color : #99CCCC;
layer-background-color : #99CCCC;
border-width : 1px;
border-style : solid;
border-color : #006666;
width : 150px;
top : 50px;
left : 10px;
position : absolute;
z-index : 90;
visibility : hidden;
}


#layer2 {
background-color : #99CCCC;
layer-background-color : #99CCCC;
border-width : 1px;
border-style : solid;
border-color : #006666;
width : 150px;
top : 50px;
left : 50px;
position : absolute;
z-index : 90;
visibility : hidden;
}


#layer3 {
background-color : #99CCCC;
layer-background-color : #99CCCC;
border-width : 1px;
border-style : solid;
border-color : #006666;
width : 150px;
top : 50px;
left : 100px;
position : absolute;
z-index : 90;
visibility : hidden;
}


#layer4 {
background-color : #99CCCC;
layer-background-color : #99CCCC;
border-width : 1px;
border-style : solid;
border-color : #006666;
width : 150px;
top : 50px;
left : 140px;
position : absolute;
z-index : 90;
visibility : hidden;
}


#layer5 {
background-color : #99CCCC;
layer-background-color : #99CCCC;
border-width : 1px;
border-style : solid;
border-color : #006666;
width : 150px;
top : 50px;
left : 180px;
position : absolute;
z-index : 90;
visibility : hidden;
}



#layer6 {
background-color : #99CCCC;
layer-background-color : #99CCCC;
border-width : 1px;
border-style : solid;
border-color : #006666;
width : 150px;
top : 50px;
left : 220px;
position : absolute;
z-index : 90;
visibility : hidden;
}

#layer7 {
background-color : #99CCCC;
layer-background-color : #99CCCC;
border-width : 1px;
border-style : solid;
border-color : #006666;
width : 150px;
top : 50px;
left : 270px;
position : absolute;
z-index : 90;
visibility : hidden;
}

#layer8 {
background-color : #99CCCC;
layer-background-color : #99CCCC;
border-width : 1px;
border-style : solid;
border-color : #006666;
width : 150px;
top : 50px;
left : 300px;
position : absolute;
z-index : 90;
visibility : hidden;
}
</STYLE>

<SCRIPT language=javascript>
var activeSub=0;
var SubNum=0;

function reDo(){ window.location.reload() }
window.onresize = reDo;


//Define global variables

var timerID = null;
var timerOn = true;
var timecount = 3000;
var what = null;
var newbrowser = true;
var check = true;

function init(){
// alert (&quot;Running Init&quot;);
if (document.layers) {
// alert (&quot;Running Netscape 4&quot;);
layerRef=&quot;document.layers&quot;;
styleSwitch=&quot;&quot;;
visibleVar=&quot;show&quot;;
screenSize = window.innerWidth;
what =&quot;ns4&quot;;


}else if(document.all){
// alert (&quot;Running IE&quot;);
layerRef=&quot;document.all&quot;;
styleSwitch=&quot;.style&quot;;
visibleVar=&quot;visible&quot;;
screenSize = document.body.clientWidth + 18;
what =&quot;ie&quot;;

}else if(document.getElementById){
// alert (&quot;Running Netscape 6&quot;);
layerRef=&quot;document.getElementByID&quot;;
styleSwitch=&quot;.style&quot;;
visibleVar=&quot;visible&quot;;
what=&quot;moz&quot;;

}else{
//alert(&quot;Older than 4.0 browser.&quot;);
what=&quot;none&quot;;
newbrowser = false;
}


window.status='status bar text to go here';
check = true;
}

// Turns the layers on and off
function showLayer(layerName){
if(check){
if (what ==&quot;none&quot;){
return;
}
else if (what == &quot;moz&quot;){
document.getElementById(layerName).style.visibility=&quot;visible&quot;;
}
else{
eval(layerRef+'[&quot;'+layerName+'&quot;]'+styleSwitch+'.visibility=&quot;visible&quot;');
}
}
else {// alert (&quot;Please wait for the page to finish loading.&quot;);
return;}
}

function hideLayer(layerName){
if(check){
if (what ==&quot;none&quot;){
return;
}
else if (what == &quot;moz&quot;){
document.getElementById(layerName).style.visibility=&quot;hidden&quot;;
}
else{
eval(layerRef+'[&quot;'+layerName+'&quot;]'+styleSwitch+'.visibility=&quot;hidden&quot;');
}

}
else {// alert (&quot;Please wait for the page to finish loading.&quot;);
return;}
}


function hideAll(){
hideLayer('layer1');
hideLayer('layer2');
hideLayer('layer3');
hideLayer('layer4');
hideLayer('layer5');
hideLayer('layer6');
hideLayer('layer7');
hideLayer('layer8');
}


function startTime() {
if (timerOn == false) {
timerID=setTimeout( &quot;hideAll()&quot; , timecount);
timerOn = true;

}

}


function stopTime() {
if (timerOn) {
clearTimeout(timerID);
timerID = null;
timerOn = false;
}
}

function onLoad(){
init();

}
</SCRIPT>

</head>

<body onLoad=&quot;init();&quot;>

<table border=&quot;0&quot; cellpadding=&quot;10&quot; width=&quot;150&quot; cellspacing=&quot;0&quot;>
<tr>
<td><a href=&quot;#&quot; onMouseOver=&quot;hideAll(); showLayer('layer1'); stopTime()&quot; onMouseOut=&quot;startTime();&quot;>link</a></td>
<td><a href=&quot;#&quot; onMouseOver=&quot;hideAll(); showLayer('layer2'); stopTime()&quot; onMouseOut=&quot;startTime();&quot;>link</a></td>
<td><a href=&quot;#&quot; onMouseOver=&quot;hideAll(); showLayer('layer3'); stopTime()&quot; onMouseOut=&quot;startTime();&quot;>link</a></td>
<td><a href=&quot;#&quot; onMouseOver=&quot;hideAll(); showLayer('layer4'); stopTime()&quot; onMouseOut=&quot;startTime();&quot;>link</a></td>
<td><a href=&quot;#&quot; onMouseOver=&quot;hideAll(); showLayer('layer5'); stopTime()&quot; onMouseOut=&quot;startTime();&quot;>link</a></td>
<td><a href=&quot;#&quot; onMouseOver=&quot;hideAll(); showLayer('layer6'); stopTime()&quot; onMouseOut=&quot;startTime();&quot;>link</a></td>
<td><a href=&quot;#&quot; onMouseOver=&quot;hideAll(); showLayer('layer7'); stopTime()&quot; onMouseOut=&quot;startTime();&quot;>link</a></td>
<td><a href=&quot;#&quot; onMouseOver=&quot;hideAll(); showLayer('layer8'); stopTime()&quot; onMouseOut=&quot;startTime();&quot;>link</a></td>
</tr>
</table>

<div id=&quot;layer1&quot;>
<div align=&quot;center&quot;>
<center>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;>
<tr>
<td>
<div align=&quot;center&quot;>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;>
<tr>
<td><font color=&quot;#FFFFFF&quot;><a href=&quot;#&quot;>Test Link</a></font></td>
</tr>
<tr>
<td><font color=&quot;#FFFFFF&quot;><a href=&quot;#&quot;>Test Link</a></font></td>
</tr>
<tr>
<td><font color=&quot;#FFFFFF&quot;><a href=&quot;#&quot;>Test Link</a></font></td>
</tr>
<tr>
<td><font color=&quot;#FFFFFF&quot;><a href=&quot;#&quot;>Test Link</a></font></td>
</tr>
<tr>
<td><font color=&quot;#FFFFFF&quot;><a href=&quot;#&quot;>Test Link</a></font></td>
</tr>
<tr>
<td><font color=&quot;#FFFFFF&quot;><a href=&quot;#&quot;>Test Link</a></font></td>
</tr>
<tr>
<td><font color=&quot;#FFFFFF&quot;><a href=&quot;#&quot;>Test Link</a></font></td>
</tr>
<tr>
<td><font color=&quot;#FFFFFF&quot;><a href=&quot;#&quot;>Test Link</a></font></td>
</tr>
<tr>
<td><font color=&quot;#FFFFFF&quot;><a href=&quot;#&quot;>Test Link</a></font></td>
</tr>
<tr>
<td><font color=&quot;#FFFFFF&quot;><a href=&quot;#&quot;>Test Link</a></font></td>
</tr>
<tr>
<td><font color=&quot;#FFFFFF&quot;><a href=&quot;#&quot;>Test Link</a></font></td>
</tr>
<tr>
<td><font color=&quot;#FFFFFF&quot;><a href=&quot;#&quot;>Test Link</a></font></td>
</tr>
<tr>
<td><font color=&quot;#FFFFFF&quot;><a href=&quot;#&quot;>Test Link</a></font></td>
</tr>
<tr>
<td><font color=&quot;#FFFFFF&quot;><a href=&quot;#&quot;>Test Link</a></font></td>
</tr>
<tr>
<td><font color=&quot;#FFFFFF&quot;><a href=&quot;#&quot;>Test Link</a></font></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</center>
</div>
</div>

<div id=&quot;layer2&quot;>
<a href=&quot;#&quot; onMouseOver=&quot;stopTime();&quot; onMouseOut=&quot;startTime();&quot;>nav item</a><br>
<a href=&quot;#&quot; onMouseOver=&quot;stopTime();&quot; onMouseOut=&quot;startTime();&quot;>nav item</a><br>
<a href=&quot;#&quot; onMouseOver=&quot;stopTime();&quot; onMouseOut=&quot;startTime();&quot;>nav item</a><br>
</div>

<div id=&quot;layer3&quot;>
<a href=&quot;#&quot; onMouseOver=&quot;stopTime();&quot; onMouseOut=&quot;startTime();&quot;>nav item</a><br>
<a href=&quot;#&quot; onMouseOver=&quot;stopTime();&quot; onMouseOut=&quot;startTime();&quot;>nav item</a><br>
<a href=&quot;#&quot; onMouseOver=&quot;stopTime();&quot; onMouseOut=&quot;startTime();&quot;>nav item</a><br>
</div>

<div id=&quot;layer4&quot;>
<a href=&quot;#&quot; onMouseOver=&quot;stopTime();&quot; onMouseOut=&quot;startTime();&quot;>nav item</a><br>
<a href=&quot;#&quot; onMouseOver=&quot;stopTime();&quot; onMouseOut=&quot;startTime();&quot;>nav item</a><br>
<a href=&quot;#&quot; onMouseOver=&quot;stopTime();&quot; onMouseOut=&quot;startTime();&quot;>nav item</a><br>
</div>

<div id=&quot;layer5&quot;>
<a href=&quot;#&quot; onMouseOver=&quot;stopTime();&quot; onMouseOut=&quot;startTime();&quot;>nav item</a><br>
<a href=&quot;#&quot; onMouseOver=&quot;stopTime();&quot; onMouseOut=&quot;startTime();&quot;>nav item</a><br>
<a href=&quot;#&quot; onMouseOver=&quot;stopTime();&quot; onMouseOut=&quot;startTime();&quot;>nav item</a><br>
</div>

<div id=&quot;layer6&quot;>
<a href=&quot;#&quot; onMouseOver=&quot;stopTime();&quot; onMouseOut=&quot;startTime();&quot;>nav item</a><br>
<a href=&quot;#&quot; onMouseOver=&quot;stopTime();&quot; onMouseOut=&quot;startTime();&quot;>nav item</a><br>
<a href=&quot;#&quot; onMouseOver=&quot;stopTime();&quot; onMouseOut=&quot;startTime();&quot;>nav item</a><br>
</div>

<div id=&quot;layer7&quot;>
<a href=&quot;#&quot; onMouseOver=&quot;stopTime();&quot; onMouseOut=&quot;startTime();&quot;>nav item</a><br>
<a href=&quot;#&quot; onMouseOver=&quot;stopTime();&quot; onMouseOut=&quot;startTime();&quot;>nav item</a><br>
<a href=&quot;#&quot; onMouseOver=&quot;stopTime();&quot; onMouseOut=&quot;startTime();&quot;>nav item</a><br>
</div>

<div id=&quot;layer8&quot;>
<a href=&quot;#&quot; onMouseOver=&quot;stopTime();&quot; onMouseOut=&quot;startTime();&quot;>nav item</a><br>
<a href=&quot;#&quot; onMouseOver=&quot;stopTime();&quot; onMouseOut=&quot;startTime();&quot;>nav item</a><br>
<a href=&quot;#&quot; onMouseOver=&quot;stopTime();&quot; onMouseOut=&quot;startTime();&quot;>nav item</a><br>
</div>

</body>

</html>
 
Sort by date Sort by votes
Hi mate,

The reason it doesn't work in layer 1 is because you are not calling the js on mouseover..


Layer 1

<a href=&quot;#&quot;>Test Link</a>



Layer 2

<a href=&quot;#&quot; onMouseOver=&quot;stopTime();&quot; onMouseOut=&quot;startTime();&quot;>nav item</a>

Hope this helps Wullie

 
Upvote 0 Downvote
All the other layers wont stay on sreen either unless the mouse is on one of the actual links......I need it to stay on screen when the mouse is on any part of the menu box...not just the links...Can it be done?
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
685
3esolar
3
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
726
pmonett
pmonett
usarmycwo
  • Locked
  • Question
Any FrontPage users still around? 1
Replies
4
Views
794
feherke
feherke
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
582
PeDa
PeDa
Krus1972
  • Locked
  • Question
Centering Content Within a Fixed Navigation Menu
Replies
10
Views
220
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top