Layer spricht onMouseOut an obwohl Maus noch darüber
Christian Ludwig
- dhtml
Hallo,
ich hab ein Problem mit dem Internet Explorer 4
http://www.system-consult.de/ie4/ie1.htm
Leider funktioniert diese Seite weder mit IE4 und IE5. Das Menü schaltet sich aus, obwohl die 'Ebene' nicht verlassen wird.
Den IE5 kann man leicht besänftigen, indem man den beim DIV-Tag noch ein (eigentlich überflüssiges) onMouseOver einfügt:
<DIV id="MyMenue" onMouseOut="hide_navi();" onMouseOver="show_navi();">
Zu sehen unter:
http://www.system-consult.de/ie4/ie2.htm
Hier noch Mal die Seite (http://www.system-consult.de/ie4/ie1.htm) im Quelltext:
<HTML>
<HEAD>
<TITLE>Test IE5 OK</TITLE>
<STYLE type="text/css"><!--
#MyMenue {
position: absolute;
left: 0px;
top: 15px;
width: 107px;
height: 51px;
z-index: 12;
visibility: hidden;}
--></STYLE>
<SCRIPT language=JavaScript TYPE="text/javascript"><!--
function show_navi()
{
document.all.MyMenue.style.visibility = "visible";
}
function hide_navi()
{
document.all.MyMenue.style.visibility = "hidden";
}
//--></SCRIPT>
</HEAD>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Dropdown Menü -->
<DIV id="MyMenue" onMouseOut="hide_navi();">
<table border=0 cellspacing=0 cellpadding=0>
<tr>
<td><img border="0" src="aus.gif" name="m01" width="9" height="17"></td>
<td><A href="hardware.htm" onMouseOut='m01.src="aus.gif";' onMouseOver='m01.src="ein.gif";' target=_self><img border="0" src="m1_hardware.gif" width="89" height="17"></A></td>
</tr><tr>
<td><img border="0" src="aus.gif" name="m02" width="9" height="17"></td>
<td><A href="software.htm" onMouseOut='m02.src="aus.gif";' onMouseOver='m02.src="ein.gif";' target=_self><img border="0" src="m1_software.gif" width="89" height="17"></A></td>
</tr><tr>
<td><img border="0" src="aus.gif" name="m03" width="9" height="17"></td>
<td><A href="schulung.htm" onMouseOut='m03.src="aus.gif";' onMouseOver='m03.src="ein.gif";' target=_self><img border="0" src="m1_schulung.gif" width="89" height="17"></A></td>
</tr></table>
</DIV>
<!-- Hauptmenü -->
<A href="produkte.htm" onMouseOver="show_navi()"><img border=0 src="m_produkte.gif" width="56" height="15"></A>
</BODY></HTML>
Wer hat eine Lösung für mein Problem? IE4 meckert natürlich auch nicht, wenn ich die Bilder im Menü nicht austauschen lassen.
Christian
P.S.: Dieses Script läuft natürlich nur unter IE4.x und 5.x
Hallo Christian,
ich kann mir eigentlich nur vorstellen, dass der IE das onMouseOut beim Bilderwechsel auf den gesamten DIV-Bereich interpretiert.
Wenn Du hier angibst
onMouseOut='m01.src="aus.gif"; show_navi()'
funktioniert es...
Beste Gruesse
Jan
Hi Jan,
Wenn Du hier angibst
onMouseOut='m01.src="aus.gif"; show_navi()'
funktioniert es...
Hmm, wirklich!?
http://www.system-consult.de/ie4/ie3.htm
War mir eigentlich auch sicher, dass ich es schon so ausprobiert hatte. Bei mir klappts nicht oder hab ich da was falsch verstanden?
Probier doch mal den Link.
Gruß,
Christian
Hallo Christian,
sorry, war ein Denkfehler meinerseits.
Ich meinte
onMouseOver='m01.src="aus.gif"; show_navi()'
Beste Gruesse
Jan
Hi Jan,
Ich meinte
onMouseOver='m01.src="aus.gif"; show_navi()'
O.K. Das funktoiniert... leider aber nur beim IE5.x
Der IE4 macht noch immer das Manü zu!
http://www.system-consult.de/ie4/ie4.htm
Übrigens meintest Du sicherlich:
onMouseOver='m01.src="ein.gif"; show_navi()'
*grins*
Ciao
Christian
Hallo,
leider habe ich auch nicht den Haken gefunden. "das muß natürlich rauszukriegen sein".... bis dahin kann ich Dir nur eine "tesafilm"-Lösung anbieten. (Tesa-Lösung weil ich notfals alles im Haus mit tesafilm oder Sekundenkleber repariere....)
lege einen zweiten Div(mymenudrueber) mit den gleichen Werten, nur einen höheren Z-Index, an. Blende den mit ein und aus. Und steuere das Ausblenden (onmouseout) über diesen zweiten Div-bereich, der dann natürlich auch im Body stehen muß. (Nur, das da eben nichts drin ist....)
Chräcker
<img src="http://homepages.compuserve.de/ackheller/stempel/grafiken/logo.gif" alt="">http://www.chraecker.de/stempel
Hallo,
lege einen zweiten Div(mymenudrueber) mit den gleichen Werten, nur einen höheren Z-Index, an. Blende den mit ein und aus. Und steuere das Ausblenden (onmouseout) über diesen zweiten Div-bereich, der dann natürlich auch im Body stehen muß. (Nur, das da eben nichts drin ist....)
Leider geht jetzt das Menü überhaupt nicht mehr weg. Oder mach ich wieder etwas falsch? Eine andere Befürchtung ist die, dass dann eventuell darunterliegende Links nicht mehr funktionieren könnten.
http://www.system-consult.de/ie4/ie5.htm
Vieleicht eine stärkere 'TesaStripe' Lösung? ;-)
Christian
Hallo,
oh jeh, oh jeh, das war wirklich eine der "nicht so gerne gesehene" Schnellschüsse von mir. bei mir geht zwar das Menü brav weg (der onmouseout muß im "oberen" neuen Div stehen) aber natürlich, die Links gehen dann natürlich nicht mehr (habe mich so auf das wegklappen konzentriert....)
ich denke, ich denke, ich denke.... bis hoffentlich später....
Chräcker
Hallo,
(negativer) Ziwschenstand (weil ich bis heute abend/ morgen nicht mehr zum basteln komme)- an alle, die mitüberlegen
Bei all den "liegts an mouseout-Überlegungen" muß ich leider sagen, daß das Script mit folgendem Menü-Div auch nicht funktioniert:
<DIV id="MyMenue" onMouseOut="hide_navi();">
<A href="hardware.htm">testtest</A><br>
<A href="software.htm">testtest</A><br>
<A href="schulung.htm">testtest</A><br>
</DIV>
das eigenartige ist, daß dort der Layer verschwindet, sobald man den zweiten Link anfährt. (Übrigens wird der mouseout zweimal ausgelöst(?) )
Wenn man jetzt das Menü so schreibt:
<DIV id="MyMenue" onMouseOut="hide_navi();">
test<br>
test<br>
<A href="hardware.htm">testtest</A><br>
<A href="software.htm">testtest</A><br>
<A href="schulung.htm">testtest</A><br>
</DIV>
wird das mouseout (zweimal) beim anfahren des ersten Links ausgelöst.... sehe da eine logik wer will....
Nun könnte man ja, zumindest beim IE5, das Menü so schreiben.
<DIV id="MyMenue" onMouseOut="hide_navi();">
<A onMouseOver="show_navi()" href="hardware.htm">testtest</A><br>
<A onMouseOver="show_navi()" href="software.htm">testtest</A><br>
<A onMouseOver="show_navi()" href="schulung.htm">testtest</A><br>
</DIV>
das funktioniert. Baut man nun aber diese neuen onmouseover in Dein richtiges Menüscript ein dann....genau, läuft nicht .... am liebsten würde ich es auf den IE schieben ;-)))
Chräcker (melde mich, wenn ich was rausgefunden habe....)
Und noch ein Hallo,
Bei all den "liegts an mouseout-Überlegungen" muß ich leider sagen, daß das Script mit folgendem Menü-Div auch nicht funktioniert:
<DIV id="MyMenue" onMouseOut="hide_navi();">
<A href="hardware.htm">testtest</A><A href="software.htm">testtest</A>
<A href="schulung.htm">testtest</A>
</DIV>
das eigenartige ist, daß dort der Layer verschwindet, sobald man den zweiten Link anfährt. (Übrigens wird der mouseout zweimal ausgelöst(?) )
Wer soll da noch was verstehen *schimpfübermicrosoft*!?
Nun könnte man ja, zumindest beim IE5, das Menü so schreiben.
<DIV id="MyMenue" onMouseOut="hide_navi();">
<A onMouseOver="show_navi()" href="hardware.htm">testtest</A><A onMouseOver="show_navi()" href="software.htm">testtest</A>
<A onMouseOver="show_navi()" href="schulung.htm">testtest</A>
</DIV>
das funktioniert. Baut man nun aber diese neuen onmouseover in Dein richtiges Menüscript ein dann....genau, läuft nicht .... am liebsten würde ich es auf den IE schieben ;-)))
Oder einfacher so:
<DIV id="MyMenue" onMouseOut="hide_navi();" onMouseOver="show_navi()">
<table border=0 cellspacing=0 cellpadding=0>
<tr>
<td><A href="hardware.htm">Hardware</A></td>
</tr><tr>
<td><A href="software.htm">Software</A></td>
</tr><tr>
<td><A href="schulung.htm">Schulung</A></td>
</tr></table>
</DIV>
http://www.system-consult.de/ie4/ie7.htm
Das funktioniert dann auch mit Bildern (ohne 'Wanderpunkt')
http://www.system-consult.de/ie4/ie8.htm
Und so klappt es dan komischerweise sogar unter IE4!!! Komisch, komisch.
Ist wohl ein unerkannter Bug, da Textlinks im IE4/5 doch automatisch eine gewisse Dynamik haben (hover).
Trotzdem, Dein Tipp mit der 2. Ebene funktioniert, wenn man sie unter das Menü legt und noch bischen was ändert. Sieht leider im EI4 furchtbar aus *blinkblitz*.
Suche also noch eine bessere Lösung als diese.
http://www.system-consult.de/ie4/ie6.htm
<STYLE type="text/css"><!--
#MyMenue {
position: absolute;
left: 0px;
top: 15px;
width: 107px;
height: 51px;
z-index: 12;
visibility: hidden;}
#MyMenue2 {
position: absolute;
left: 0px;
top: 15px;
width: 108px;
height: 53px;
z-index: 6;
visibility: hidden;}
--></STYLE>
<SCRIPT language=JavaScript TYPE="text/javascript"><!--
function show_navi()
{
document.all.MyMenue.style.visibility = "visible";
document.all.MyMenue2.style.visibility = "visible";
}
function hide_navi()
{
document.all.MyMenue.style.visibility = "hidden";
}
function hide_navi2()
{
document.all.MyMenue.style.visibility = "hidden";
document.all.MyMenue2.style.visibility = "hidden";
}
//--></SCRIPT>
</HEAD>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Dropdown Menü -->
<DIV id="MyMenue" onMouseOut="hide_navi();">
<table border=0 cellspacing=0 cellpadding=0>
<tr>
<td><img border="0" src="aus.gif" name="m01" width="9" height="17"></td>
<td><A href="hardware.htm" onMouseOut='m01.src="aus.gif";' onMouseOver='m01.src="ein.gif"; show_navi();' target=_self><img border="0" src="m1_hardware.gif" width="89" height="17"></A></td>
</tr><tr>
<td><img border="0" src="aus.gif" name="m02" width="9" height="17"></td>
<td><A href="software.htm" onMouseOut='m02.src="aus.gif";' onMouseOver='m02.src="ein.gif"; show_navi();' target=_self><img border="0" src="m1_software.gif" width="89" height="17"></A></td>
</tr><tr>
<td><img border="0" src="aus.gif" name="m03" width="9" height="17"></td>
<td><A href="schulung.htm" onMouseOut='m03.src="aus.gif";' onMouseOver='m03.src="ein.gif"; show_navi();' target=_self><img border="0" src="m1_schulung.gif" width="89" height="17"></A></td>
</tr></table>
</DIV>
<DIV id="MyMenue2" onMouseOut="hide_navi2();" onMouseOver="show_navi();"> </DIV>
So, tüftel noch bischen weiter!
Ciao
Christian
Hallo,
mit der Idee einer 2. Ebene von Chräcker Heller habe ich nun folgende funktionierende Lösung gefunden:
http://www.system-consult.de/ie4/ie9.htm
Funktionieren tut das so:
Eine Ebene hinter! dem Menü. Nur diese Ebene enthält im DIV den Aufruf der 'hide_navi();' Funktion, wenn man mit der Maus darüber! fährt.
Diese Ebene ist einfach etwas größer als die darüberliegende Menü-Ebene und wird gemainsam mit dieser sichtbar und unsichtbar gemacht.
Hier der gesamte Quelltext.
<HTML>
<HEAD>
<TITLE>Test IE4/5 OK Aber Riesen-Tesafilm-Trick</TITLE>
<STYLE type="text/css"><!--
#MyMenue {
position: absolute;
left: 2px;
top: 15px;
width: 98px;
height: 51px;
z-index: 12;
visibility: hidden;}
#MyMenue2 {
position: absolute;
left: 0px;
top: 15px;
width: 200px;
height: 100px;
z-index: 6;
visibility: hidden;}
--></STYLE>
<SCRIPT language=JavaScript TYPE="text/javascript"><!--
function show_navi()
{
document.all.MyMenue.style.visibility = "visible";
document.all.MyMenue2.style.visibility = "visible";
}
function hide_navi()
{
document.all.MyMenue.style.visibility = "hidden";
document.all.MyMenue2.style.visibility = "hidden";
}
//--></SCRIPT>
</HEAD>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Dropdown Menü -->
<DIV id="MyMenue">
<table border=0 cellspacing=0 cellpadding=0>
<tr>
<td><img border="0" src="aus.gif" name="m01" width="9" height="17"></td>
<td><A href="hardware.htm" onMouseOut='m01.src="aus.gif";' onMouseOver='m01.src="ein.gif"; show_navi();' target=_self><img border="0" src="m1_hardware.gif" width="89" height="17"></A></td>
</tr><tr>
<td><img border="0" src="aus.gif" name="m02" width="9" height="17"></td>
<td><A href="software.htm" onMouseOut='m02.src="aus.gif";' onMouseOver='m02.src="ein.gif"; show_navi();' target=_self><img border="0" src="m1_software.gif" width="89" height="17"></A></td>
</tr><tr>
<td><img border="0" src="aus.gif" name="m03" width="9" height="17"></td>
<td><A href="schulung.htm" onMouseOut='m03.src="aus.gif";' onMouseOver='m03.src="ein.gif"; show_navi();' target=_self><img border="0" src="m1_schulung.gif" width="89" height="17"></A></td>
</tr></table>
</DIV>
<DIV id="MyMenue2" onMouseOver="hide_navi();"> </DIV>
<!-- Hauptmenü -->
<A href="produkte.htm" onMouseOver="show_navi()"><img border=0 src="m_produkte.gif" width="56" height="15"></A><br>
<A href="nirvana.htm">Link in's Niemandsland</A>
</BODY></HTML>
Wenn jemand noch eine Lösung parat hat, die auch ohne diese 2. Ebene funktioniert, darf mir gern Bescheid geben, denn der zusätzliche Code vergrößert bei 7 solchen Menüs die Datei erheblich (auch, wenns ein externes Stylesheet ist)
Also, weiter grübeln ;-)
Ciao
Christian