onMouseOut funkar inte i FF och Netscape

Denna kod fungerar jätte bra i Explorer men den fungerar inte i FF och Netscape, det är när man drar muspekaren utanför meny då ska den släckas. Hoppas någon kan hjälpa mig.

<style>.open {}</style>
<script language="javascript1.2">
document.onmouseover = closeIt 
function closeIt(){ 
 currEl = window.event.toElement;  
 //alert(currEl.className);
 if (currEl.className != "open")
 	closeAll();
} 
function showLayer(val){
	closeAll();
	document.getElementById(val).style.visibility = "visible";
}
function closeAll(){
	document.getElementById("a").style.visibility = "hidden";
	document.getElementById("b").style.visibility = "hidden";
	document.getElementById("c").style.visibility = "hidden";
	document.getElementById("d").style.visibility = "hidden";
}
</script>

<div id="menubar" style="position:absolute; top:100px; left:240px; width:440px; height:20px; z-index:3;" class="open">
<table width="440" height="20" class="open">
	<tr style="cursor:pointer" class="open">
		<td width="110" height="20" onMouseOver="showLayer('a');" style="font-family:Verdana; font-size:12px; color:black; font-weight:bold;" class="open">A</td>
		<td width="110" onMouseOver="showLayer('b');" style="font-family:Verdana; font-size:12px; color:black; font-weight:bold;" class="open">B</td>
		<td width="110" onMouseOver="showLayer('c');" style="font-family:Verdana; font-size:12px; color:black; font-weight:bold;" class="open">C</td>
		<td width="110" onMouseOver="showLayer('d');" style="font-family:Verdana; font-size:12px; color:black; font-weight:bold;" class="open">D</td>
	</tr>
</table>
</div>

<div id="a" style="position:absolute; top:120px; left:240px; width:110px; height:200px; z-index:2; visibility:hidden;" class="open">
<table width="110" height="45" class="open">
	<tr style="cursor:pointer" class="open">
		<td width="110"  onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgdfg</td>
	</tr>
	<tr style="cursor:pointer">
		<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgsdfg</td>
	</tr>
	<tr style="cursor:pointer">
		<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgsdfg</td>
	</tr>
</table>
</div>

<div id="b" style="position:absolute; top:120px; left:350px; width:110px; height:200px; z-index:2; visibility:hidden" class="open">
<table width="110" height="45" class="open">
	<tr style="cursor:pointer" class="open">
		<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgsdg</td>
	</tr>
	<tr style="cursor:pointer">
		<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgsdfg</td>
	</tr>
	<tr style="cursor:pointer">
		<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgsdfg</td>
	</tr>
</table>
</div>

<div id="c" style="position:absolute; top:120px; left:460px; width:110px; height:200px; z-index:2; visibility:hidden" class="open">
<table width="110" height="45" class="open">
	<tr style="cursor:pointer" class="open">
		<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgsdg</td>
	</tr>
	<tr style="cursor:pointer">
		<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgsdfg</td>
	</tr>
	<tr style="cursor:pointer">
		<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgdfg</td>
	</tr>
</table>
</div>

<div id="d" style="position:absolute; top:120px; left:570px; width:110px; height:200px; z-index:2; visibility:hidden" class="open">
<table width="110" height="30" class="open">
	<tr style="cursor:pointer" class="open">
		<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgdfg</td>
	</tr>
	<tr style="cursor:pointer">
		<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgfg</td>
	</tr>
</table>
</div>

var vänlig och lägg koden innanför kod-taggar [ html] .. [ /html] eller [ kod] ... [ /kod] (utan mellanrum i taggen).

hittade förresten ingenting som hanterar onMouseOut i din kod. har du missat något när du klistrade in den här? du kan ju själv söka efter onMouseOut i din kod.

tror inte FF vill använda hidden i visibility utan använder hide istället, samt show istället för visible.

hittade denna koden på en annan sida. ( http://www.quirksmode.org/js/blockinvi.html )

function visi(nr)
{
	if (document.layers)
	{
		vista = (document.layers[nr].visibility == 'hide') ? 'show' : 'hide'
		document.layers[nr].visibility = vista;
	}
	else if (document.all)
	{
		vista = (document.all[nr].style.visibility == 'hidden') ? 'visible'	: 'hidden';
		document.all[nr].style.visibility = vista;
	}
	else if (document.getElementById)
	{
		vista = (document.getElementById(nr).style.visibility == 'hidden') ? 'visible' : 'hidden';
		document.getElementById(nr).style.visibility = vista;

	}
}

HTMLkod

Här kommer koden, sorry.

<style>.open {}</style>
<script language="javascript1.2">
document.onmouseover = closeIt 
function closeIt(){ 
currEl = window.event.toElement; 
//alert(currEl.className);
if (currEl.className != "open")
closeAll();
} 
function showLayer(val){
closeAll();
document.getElementById(val).style.visibility = "visible";
}
function closeAll(){
document.getElementById("a").style.visibility = "hidden";
document.getElementById("b").style.visibility = "hidden";
document.getElementById("c").style.visibility = "hidden";
document.getElementById("d").style.visibility = "hidden";
}
</script>

<div id="menubar" style="position:absolute; top:100px; left:240px; width:440px; height:20px; z-index:3;" class="open">
<table width="440" height="20" class="open">
<tr style="cursor:pointer" class="open">
<td width="110" height="20" onMouseOver="showLayer('a');" style="font-family:Verdana; font-size:12px; color:black; font-weight:bold;" class="open">A</td>
<td width="110" onMouseOver="showLayer('b');" style="font-family:Verdana; font-size:12px; color:black; font-weight:bold;" class="open">B</td>
<td width="110" onMouseOver="showLayer('c');" style="font-family:Verdana; font-size:12px; color:black; font-weight:bold;" class="open">C</td>
<td width="110" onMouseOver="showLayer('d');" style="font-family:Verdana; font-size:12px; color:black; font-weight:bold;" class="open">D</td>
</tr>
</table>
</div>

<div id="a" style="position:absolute; top:120px; left:240px; width:110px; height:200px; z-index:2; visibility:hidden;" class="open">
<table width="110" height="45" class="open">
<tr style="cursor:pointer" class="open">
<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgdfg</td>
</tr>
<tr style="cursor:pointer">
<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgsdfg</td>
</tr>
<tr style="cursor:pointer">
<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgsdfg</td>
</tr>
</table>
</div>

<div id="b" style="position:absolute; top:120px; left:350px; width:110px; height:200px; z-index:2; visibility:hidden" class="open">
<table width="110" height="45" class="open">
<tr style="cursor:pointer" class="open">
<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgsdg</td>
</tr>
<tr style="cursor:pointer">
<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgsdfg</td>
</tr>
<tr style="cursor:pointer">
<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgsdfg</td>
</tr>
</table>
</div>

<div id="c" style="position:absolute; top:120px; left:460px; width:110px; height:200px; z-index:2; visibility:hidden" class="open">
<table width="110" height="45" class="open">
<tr style="cursor:pointer" class="open">
<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgsdg</td>
</tr>
<tr style="cursor:pointer">
<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgsdfg</td>
</tr>
<tr style="cursor:pointer">
<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgdfg</td>
</tr>
</table>
</div>

<div id="d" style="position:absolute; top:120px; left:570px; width:110px; height:200px; z-index:2; visibility:hidden" class="open">
<table width="110" height="30" class="open">
<tr style="cursor:pointer" class="open">
<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgdfg</td>
</tr>
<tr style="cursor:pointer">
<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgfg</td>
</tr>
</table>
</div>

redigera gärna ditt första post så den blir mer lättläst.

tänk på att visibility behåller ytan som div-taggen tar upp medan display tar bort taggen helt och hållet, svårt att förklara men titta på exemplen på länken jag skickade med i den tidigare posten.

kan du lägga in alla kod?

vet inte om det är OK att göra det men här kommer den iaf, skulle det bryta mot någon regel kan väl någon moderator redigera inlägget.

Annars kan du ju själv titta på källkoden på sidan.

<html lang="en">
<HEAD>
<TITLE>JavaScript - Display and Visibility</TITLE>
<link rel="stylesheet" href="../quirksmode.css">
<link rel="up" href="contents.html">
<script src="../quirksmode.js"></script>

<STYLE TYPE="text/css">
<!--
.para {
	margin-bottom: 10px;
	visibility: visible;
	position: relative;}
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function visi(nr)
{
	if (document.layers)
	{
		vista = (document.layers[nr].visibility == 'hide') ? 'show' : 'hide'
		document.layers[nr].visibility = vista;
	}
	else if (document.all)
	{
		vista = (document.all[nr].style.visibility == 'hidden') ? 'visible'	: 'hidden';
		document.all[nr].style.visibility = vista;
	}
	else if (document.getElementById)
	{
		vista = (document.getElementById(nr).style.visibility == 'hidden') ? 'visible' : 'hidden';
		document.getElementById(nr).style.visibility = vista;

	}
}

function blocking(nr)
{
	if (document.layers)
	{
		current = (document.layers[nr].display == 'none') ? 'block' : 'none';
		document.layers[nr].display = current;
	}
	else if (document.all)
	{
		current = (document.all[nr].style.display == 'none') ? 'block' : 'none';
		document.all[nr].style.display = current;
	}
	else if (document.getElementById)
	{
		vista = (document.getElementById(nr).style.display == 'none') ? 'block' : 'none';
		document.getElementById(nr).style.display = vista;
	}
}
// -->
</SCRIPT>
</HEAD>

<BODY>

<H2>Display and Visibility</H2>

<div id="header"></div>

<DIV CLASS="floater">
<p>It does not completely work in <B>Netscape 4</B>, <B>Opera</B> and
<B>Omniweb</B> because those browsers don't support the changing of display.</p>
<p>The changing of display works in <B>iCab</B>, but not the changing of visibility.</p>

<p><B>Opera 5</B> made the invisibility style ('visible' or 'hidden')
<em>upper case</em>, so that reading it out may cause confusion. Bug solved in Opera 6 (5b5 on Mac). The
script does no longer take it into account.</p>
</DIV>

<P CLASS="intro">This is a test page to clarify the difference between display and invisibility.
Below you can experiment with invisibility and blocking.
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
if (document.layers)
{
	document.write('Unfortunately Netscape 4 does not support display changes, so that bit won\'t work for you.');
}
else if (!document.getElementById && !document.all)
{
	document.write('Unfortunately your browser does not support DHTML, so clicking the links is useless.');
}
// -->
</SCRIPT>
</P>

<P>For an example of a script using only invisibility, see the
<A HREF="dhtmlnavi.html">Navigation: layers</A> script, for an example of a script
using only display, see the

<A HREF="display.html">Navigation: display</A> script.</P>

<OL>
<LI>Paragraph 1:
	<UL>
	<LI><A CLASS="page" HREF="#" onClick="visi('number1'); return false">Toggle visible/invisible</A>
	<LI><A CLASS="page" HREF="#" onClick="blocking('number1'); return false;">Toggle display block/none</A>
	</UL>

<LI>Paragraph 2:
	<UL>
	<LI><A CLASS="page" HREF="#" onClick="visi('number2'); return false">Toggle visible/invisible</A>
	<LI><A CLASS="page" HREF="#" onClick="blocking('number2'); return false;">Toggle display block/none</A>
	</UL>
<LI>Paragraph 3:
	<UL>
	<LI><A CLASS="page" HREF="#" onClick="visi('number3'); return false">Toggle visible/invisible</A>
	<LI><A CLASS="page" HREF="#" onClick="blocking('number3'); return false;">Toggle display block/none</A>

	</UL>

</OL>

<P CLASS="para" ID="number1">This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1.
This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1.
This is paragraph 1.</P>

<P CLASS="para" ID="number2">This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2.
This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2.
This is paragraph 2.</P>

<P CLASS="para" ID="number3">This is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph 3.
This is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph 3.
This is paragraph 3.</P>

<div id="footer"><a href="/home.html">Home</a> <a href="/sitemap.html">Sitemap</a>

</div>

</BODY>
</HTML>

Kan du inte utgå från min kod och få in det där? Tusen tack, uppskattar din hjälp.

har inte tid att göra det just nu, det är inte å svårt, försök gärna själv.
gör ingen annan det kanske jag kan göra det i kväll om jag hinner.

Okey, kan du kolla på detta i kväll om ingen annan hjälper mig under dagen? Tusen tack.

Tråden dog visst, men jag hittar ingen onmouseout fortfarande i din kod =/

Vad exakt är det du vill ha hjälp med? onmouseout kan aldrig vara svårt ;)

Hej Duffer

Denna kod fungerar jätte bra i Explorer men den fungerar inte i FF och Netscape, när man drar muspekaren utanför meny då ska den släckas. Hoppas Du kan hjälpa mig.

<style>.open {}</style>
<script language="javascript1.2">
document.onmouseover = closeIt 
function closeIt(){ 
currEl = window.event.toElement; 
//alert(currEl.className);
if (currEl.className != "open")
closeAll();
} 
function showLayer(val){
closeAll();
document.getElementById(val).style.visibility = "visible";
}
function closeAll(){
document.getElementById("a").style.visibility = "hidden";
document.getElementById("b").style.visibility = "hidden";
document.getElementById("c").style.visibility = "hidden";
document.getElementById("d").style.visibility = "hidden";
}
</script>

<div id="menubar" style="position:absolute; top:100px; left:240px; width:440px; height:20px; z-index:3;" class="open">
<table width="440" height="20" class="open">
<tr style="cursor:pointer" class="open">
<td width="110" height="20" onMouseOver="showLayer('a');" style="font-family:Verdana; font-size:12px; color:black; font-weight:bold;" class="open">A</td>
<td width="110" onMouseOver="showLayer('b');" style="font-family:Verdana; font-size:12px; color:black; font-weight:bold;" class="open">B</td>
<td width="110" onMouseOver="showLayer('c');" style="font-family:Verdana; font-size:12px; color:black; font-weight:bold;" class="open">C</td>
<td width="110" onMouseOver="showLayer('d');" style="font-family:Verdana; font-size:12px; color:black; font-weight:bold;" class="open">D</td>
</tr>
</table>
</div>

<div id="a" style="position:absolute; top:120px; left:240px; width:110px; height:200px; z-index:2; visibility:hidden;" class="open">
<table width="110" height="45" class="open">
<tr style="cursor:pointer" class="open">
<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgdfg</td>
</tr>
<tr style="cursor:pointer">
<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgsdfg</td>
</tr>
<tr style="cursor:pointer">
<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgsdfg</td>
</tr>
</table>
</div>

<div id="b" style="position:absolute; top:120px; left:350px; width:110px; height:200px; z-index:2; visibility:hidden" class="open">
<table width="110" height="45" class="open">
<tr style="cursor:pointer" class="open">
<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgsdg</td>
</tr>
<tr style="cursor:pointer">
<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgsdfg</td>
</tr>
<tr style="cursor:pointer">
<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgsdfg</td>
</tr>
</table>
</div>

<div id="c" style="position:absolute; top:120px; left:460px; width:110px; height:200px; z-index:2; visibility:hidden" class="open">
<table width="110" height="45" class="open">
<tr style="cursor:pointer" class="open">
<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgsdg</td>
</tr>
<tr style="cursor:pointer">
<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgsdfg</td>
</tr>
<tr style="cursor:pointer">
<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgdfg</td>
</tr>
</table>
</div>

<div id="d" style="position:absolute; top:120px; left:570px; width:110px; height:200px; z-index:2; visibility:hidden" class="open">
<table width="110" height="30" class="open">
<tr style="cursor:pointer" class="open">
<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgdfg</td>
</tr>
<tr style="cursor:pointer">
<td width="110" onMouseOver="" style="font-family:Verdana; font-size:10px; color:black;" class="open">sdfgfg</td>
</tr>
</table>
</div>

Hej,
Det var nog bland det värsta fulhack jag sett för att lösa en så lätt uppgift =)
Din fråga heter tom onmouseout funkar inte... men du använder inte onmouseout någon stanns, vad du har gjort är att kolla onmouseover på hela dokumentet för att på så sätt omvänta räkna ut att musen inte längre är över menyn.

På alla td's där du nu har onmouseover läggtill onmouseout="closeAll();" så kommer det funka fin fint sen.

Exempel:
<td width="110" onmouseout="closeAll();" onMouseOver="showLayer('d');" style="font-family:Verdana; font-size:12px; color:black; font-weight:bold;" class="open">D</td>

mvh

Tusen tack

Tack för hjälpen, har du sätt min andra tråd?

Jepp svarar på den nu, markera gärna mitt inlägg som accepterat!

mvh