javascript mouseover script

Question

changeco 0 Light Poster

14 Years Ago

I wrote this code and I can't get it disappear on mouseout..

<script language="javascript" type="text/javascript">
	var activeLayer = "0";
	function highlight(theLayer)
		{				
			highlighter = document.all? document.all[theLayer] : document.getElementById? document.getElementById(theLayer) : ""		
		}
	function lowlight(theLayer)
		{					
			lowlighter = document.all? document.all[theLayer] : document.getElementById? document.getElementById(theLayer) : ""		
		}
	function JumpToNav(navIndex)
		{
			newNav	= "NavMenu"+navIndex;
			newCon	= "NavContent"+navIndex;
			oldNav	= "NavMenu"+activeLayer;
			oldCon	= "NavContent"+activeLayer;
			newNavLayer	= document.all? document.all[newNav] : document.getElementById? document.getElementById(newNav) : ""		
			newConLayer	= document.all? document.all[newCon] : document.getElementById? document.getElementById(newCon) : ""		

			oldNavLayer	= document.all? document.all[oldNav] : document.getElementById? document.getElementById(oldNav) : ""		
			oldConLayer	= document.all? document.all[oldCon] : document.getElementById? document.getElementById(oldCon) : ""					
			
			oldConLayer.style.display="none";
			newConLayer.style.display="inline";	
			activeLayer = navIndex;
		}
		
	function buildObject(obj){
		document.write(obj)
	}
</script>

You apply the show hide like this:

<ul>
 <li id="NavMenu0" onmouseover="JumpToNav(0);"><a href="#nogo">1 - blah blah blah blah blah </a></li>
 <li id="NavMenu1" onmouseover="JumpToNav(1);"><a href="#nogo">2 - blah blah blah blah blah </a></li>
</ul>

The problem is when you mouseout any of the links the menu stays visible...

Can somebody help please?

Ted

javascript

2 Contributors
2 Replies
195 Views
7 Hours Discussion Span
Latest Post 14 Years Ago Latest Post by changeco

harrierdh 0 Junior Poster in Training

14 Years Ago

You didn't post working code. Where is the content piece of html. I don't see where you are doing any onMouseOut or have not posted any code that would even begin to act like you say.

I tried the code. Removed all the javascript references to con. Then I realized what the code that was left does absolutly nothing.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

changeco 0 Light Poster · Answer 1 · 2010-01-22T02:29:57+00:00

I tried a onmouseout tag on the <li> tag and now you can't mouseover the popup...

<html>
<head>
<script language="javascript" type="text/javascript">
	var activeLayer = "0";
	function highlight(theLayer)
		{				
			highlighter = document.all? document.all[theLayer] : document.getElementById? document.getElementById(theLayer) : ""		
		}
	function lowlight(theLayer)
		{					
			lowlighter = document.all? document.all[theLayer] : document.getElementById? document.getElementById(theLayer) : ""		
		}
	function JumpToNav(navIndex)
		{
			newNav	= "NavMenu"+navIndex;
			newCon	= "NavContent"+navIndex;
			oldNav	= "NavMenu"+activeLayer;
			oldCon	= "NavContent"+activeLayer;
			newNavLayer	= document.all? document.all[newNav] : document.getElementById? document.getElementById(newNav) : ""		
			newConLayer	= document.all? document.all[newCon] : document.getElementById? document.getElementById(newCon) : ""		

			oldNavLayer	= document.all? document.all[oldNav] : document.getElementById? document.getElementById(oldNav) : ""		
			oldConLayer	= document.all? document.all[oldCon] : document.getElementById? document.getElementById(oldCon) : ""					
			
			oldConLayer.style.display="none";
			newConLayer.style.display="inline";	
			activeLayer = navIndex;
		}
		
	function buildObject(obj){
		document.write(obj)
	}
</script>
</head>
<body>
<div>
<ul>
 <li id="NavMenu0" onmouseover="JumpToNav(0);"><a href="#nogo">1 - blah blah blah blah blah </a></li>
 <li id="NavMenu1" onmouseover="JumpToNav(1);"><a href="#nogo">2 - blah blah blah blah blah </a></li>
</ul>
</div>
<div id="NavContent0" style="display:none; position:absolute; left:80px; top:80px; height:100px; width:100px; z-index:999;">1</div>
<div id="NavContent1" style="display:none; position:absolute; left:90px; top:80px; height:100px; width:100px; z-index:999;">2</div>
</body>
</html>