Christian Ludwig: Layer spricht onMouseOut an obwohl Maus noch darüber

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

  1. 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

    1. 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

      1. Hallo Christian,

        sorry, war ein Denkfehler meinerseits.
        Ich meinte
          onMouseOver='m01.src="aus.gif"; show_navi()'

        Beste Gruesse

        Jan

        1. 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

  2. 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

    1. 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

      1. 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

      2. 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....)

        1. 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

  3. 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