Netscape-Problem! Wie zu lösen?
Kevin Wiedener
- programmiertechnik
0 Mulder
Hi Leute,
ich werde jetzt mal den gesamten Quellcode posten. Den Problempunkt werdet ihr wohl alle schnell erkennen.
Code:
<html>
<head>
<title>Titel</title>
<style>
body {
font-family: Verdana;
font-size: 8pt;
color: #000000;
margin-left: 0px;
margin: 0px;
}
td {font-family:Verdana; font-size:8pt; color: #FFFFFF; border: 1px solid #000000;}
.selected {font-family:Verdana; font-size:8pt; color: #FFFFFF; border: 1px solid #DDDDDD; background-color: #B0B5B9;}
A:link {color: #FFFFFF; TEXT-DECORATION: none; font-family: Verdana; font-size: 8pt}
A:visited {color: #FFFFFF; TEXT-DECORATION: none; font-family: Verdana; font-size: 8pt}
A:active {color: #FFFFFF; TEXT-DECORATION: none; font-family: Verdana; font-size: 8pt}
A:hover {
COLOR: #FFFFFF;
TEXT-DECORATION: none;
font-family: Verdana;
font-size: 8pt
}
</style>
<script language="javascript">
function create()
{
if (document.getElementById("Links").style.display) {
document.getElementById("Links").style.display = "inline";
}
}
function release()
{
document.getElementById("Links").style.display = "none";
}
function check()
{
if (document.all) {
document.getElementById("Links").style.left = 610;
}
else {
document.getElementById("Links").style.left = 599;
}
}
</script>
</head>
<body bgcolor="#F7F7F7" onLoad="javascript:check()">
<img src="left.gif" hspace="0" vspace="0" align="left">
<br><br><br><br><table bgcolor="#000000" cellpadding="0" cellspacing="0">
<tr>
<td align="center" height="18" width="100">Home</td>
<td align="center" height="18" width="100" onMouseOver="javascript:release(); style.backgroundColor='#D0D5D9'; style.border='1px solid #000000';" onMouseOut="style.backgroundColor='#000000'; style.border='1px solid #000000';"><a href="gruppen.html">Gruppen</a></td>
<td align="center" height="18" width="100" onMouseOver="javascript:release(); style.backgroundColor='#D0D5D9'; style.border='1px solid #000000';" onMouseOut="style.backgroundColor='#000000'; style.border='1px solid #000000';"><a href="termine.html">Termine</a></td>
<td align="center" height="18" width="100" onMouseOver="javascript:release(); style.backgroundColor='#D0D5D9'; style.border='1px solid #000000';" onMouseOut="style.backgroundColor='#000000'; style.border='1px solid #000000';"><a href="projekte.html">Projekte</a></td>
<td align="center" height="18" width="100" onMouseOver="javascript:release(); style.backgroundColor='#D0D5D9'; style.border='1px solid #000000';" onMouseOut="style.backgroundColor='#000000'; style.border='1px solid #000000';"><a href="mitarbeiter.html">Mitarbeiter</a></td>
<td align="center" height="18" width="100" onMouseOver="javascript:create(); style.backgroundColor='#D0D5D9'; style.border='1px solid #000000';" onMouseOut="javascript:release(); style.backgroundColor='#000000'; style.border='1px solid #000000';"><a href="#">Links</a></td>
<td align="center" height="18" width="100" onMouseOver="javascript:release(); style.backgroundColor='#D0D5D9'; style.border='1px solid #000000';" onMouseOut="style.backgroundColor='#000000'; style.border='1px solid #000000';"><a href="kontakt.html">Kontakt</a></td>
</tr>
</table>
<br><br>
<br><br>
<div id="Links" style="position:absolute; top:82px; width:100px; display:none;">
<table bgcolor="#000000" width="102" cellpadding="0" cellspacing="0" onMouseOver="javascript:create();" onMouseOut="javascript:release();">
<tr><td align="center" height="18" width="100"><br></td></tr>
<tr><td align="center" height="18" width="100" onMouseOver="style.backgroundColor='#D0D5D9'; style.border='1px solid #000000';" onMouseOut="style.backgroundColor='#000000'; style.border='1px solid #000000';"><a href="feju/opferbix.html">Förderverein</a></td></tr>
<tr><td align="center" height="18" width="100" onMouseOver="style.backgroundColor='#D0D5D9'; style.border='1px solid #000000';" onMouseOut="style.backgroundColor='#000000'; style.border='1px solid #000000';"><a href="http://www.homepage.de/">Gemeinde</a></td></tr>
<tr><td align="center" height="18" width="100" onMouseOver="style.backgroundColor='#D0D5D9'; style.border='1px solid #000000';" onMouseOut="style.backgroundColor='#000000'; style.border='1px solid #000000';"><a href="links.html">Sonstige</a></td></tr>
<tr><td align="center" height="18" width="100"><br></td></tr>
</table>
</div>
<div style="position:absolute; left:100px; width:700px;">
Hallo, liebe Leute!<br><br><br>
Wie geht es Euch?<br>
Ich hatte wunderbare und wunderschöne Ferien.</div>
</body>
So, dass Problem liegt hier (oder zumindest vermute ich es doch stark):
div id="Links" style="position:absolute; top:82px; width:100px; display:none;">
<table bgcolor="#000000" width="102" cellpadding="0" cellspacing="0" onMouseOver="javascript:create();" onMouseOut="javascript:release();">....
Beim Internet Explorer funktioniert alles richtig. Nur beim Netscape nicht!!! Wenn sich die Kartei, bzw. der Div "Links" aufblättert und ich mit der Maus drüber fahr, flakert die Tabelle immer, d.h. der div wird einmal dargestellt und einmal wieder nicht, nur für das menschliche Auge kaum wahrnehmbar. Ich möchte aber, dass die Tabelle oder Kartei erst wieder verschwindet, wenn die Maus nicht darüberfährt, sondern wie beim IE, die Tabelle verlässt.
Das Flackern alleine wäre nicht das große Problem, aber die von der Maus mit MouseOver markierten Tabelleneinträge bleiben markiert und das sieht dann mehr als beschissen aus.
Vielleicht hat jemand von Euch auch eine allgemein bessere Lösung meiner kleinen Navigationsleiste. Ich wüsste zwar nicht, wie ichs anders verwirklichen sollte, aber mal schaun.
Kann mir jemand helfen? Wie löse ich meinen Netscape-Bug???
Kevin
Beim Internet Explorer funktioniert alles richtig. Nur beim Netscape nicht!!! Wenn sich die Kartei, bzw. der Div "Links" aufblättert und ich mit der Maus drüber fahr, flakert die Tabelle immer, d.h. der div wird einmal dargestellt und einmal wieder nicht, nur für das menschliche Auge kaum wahrnehmbar. Ich möchte aber, dass die Tabelle oder Kartei erst wieder verschwindet, wenn die Maus nicht darüberfährt, sondern wie beim IE, die Tabelle verlässt.
Eine direkte Lösung gibt es nicht.
Ich löse das wie folgt:
1. Jeder Layer hat nur einen onMouseOver, keinen onMouseOut. Bei ersterem werden zunächst alle Layer aus- und dann der überfahrene eingeblendet.
2. Um beim ganz herausfahren aus den Layern noch alle auszuschalten, mußt Du entweder
a. transparente GIFs außen drumherum packen (quasi ein "Bewegungsmelder"), die bei onMouseOver alle Layer ausschalten oder
b. permanent die Mausposition überwachen und außerhalb der Navigation dann alle Layer ausschalten.
Diese Lösung (genauer: Teil 1) hat auch den Vorteil, daß es auch bei schnellem Drüberfahren nicht mehr möglich ist, zwei oder mehr Punkte gleichzeitig auszuklappen.
So zu sehen bei http://www.e-max.de/index2.php