Vivian M.: Menus in Javascript

Hallöchen!
Ich versuche ein Menu wie folgt aufzubauen:
per in einem <div> liegt ein <img>, das sich, wenn ich mit der Maus rüberfahre, verändert (das klappt so weit mit OnMouseOver). Nu möchte ich allerdings noch, dass sich beim Rüberfahren ein kleines Menu öffnet (ebenfalls in einem <div> - wegen der Positionierung). Kann ich das in einer function definieren (bisher klappt das nicht)?? Oder muss ich da anders an die Sache herangehen?

mfg Vivi M.

P.S.: Bitte keine Mails, kann die von hier nicht abrufen ;)

  1. Hi

    Wenn du dich schon ein bischen mit JavaScript auskennst, kann ich dir die Navigation dieser Seite zum Umbau empfehlen:

    http://www.nuklearmedizin-stgeorg-leipzig.de/

    1. habe d'ehre

      Wenn du dich schon ein bischen mit JavaScript auskennst, kann ich dir die Navigation dieser Seite zum Umbau empfehlen:
      http://www.nuklearmedizin-stgeorg-leipzig.de/

      Ne, eher nicht!

      Was soll ein Menue "only for IE" fuer einen Sinn machen?
      Bei Mozilla-Derivaten (1.3, Phoenix, K-Meleon) siehst Du rein gar nichts von diesem "tollen" Menue. ;-)

      --
      carpe diem
      Wilhelm
      1. Was soll ein Menue "only for IE" fuer einen Sinn machen?
        Bei Mozilla-Derivaten (1.3, Phoenix, K-Meleon) siehst Du rein gar nichts von diesem "tollen" Menue. ;-)

        Sollte schon mit allen Browsern funktionieren und nicht allein auf den IE "optimiert" (schreckliches Wort) werden.

        mfg Vivian M.

        1. habe d'ehre

          Sollte schon mit allen Browsern funktionieren und nicht allein auf den IE "optimiert" (schreckliches Wort) werden.

          Bei Deinem "Problem" musst DU eigentlich nur die <div> zeigen oder verbergen.

          function hideNav(divid)
          {
          if (browser=="W3Cdom"){document.getElementById(divid).style.visibility="hidden";}
          if (browser=="Netscape"){document.layers[divid].visibility="hide";}
          if (browser=="Explorer"){document.all[divid].style.visibility="hidden";}
          }
          // einschalten Layer fuer 2.Ebene
          function showNav(divid)
          {
          if (browser=="W3Cdom"){document.getElementById(divid).style.visibility="visible";}
          if (browser=="Netscape"){document.layers[divid].visibility="show";}
          if (browser=="Explorer"){document.all[divid].style.visibility="visible";}
          }

          --
          carpe diem
          Wilhelm
          1. Klappt leider immer noch nicht (stelle mich doof an?), also:
            habe das obrige Script soweit eingefügt,
            und zusätzlich im <body>-Tag onLoad="hideNav(MenuDiv);" -> MenuDiv ist die id des <div>.
            Die <div>, die angesprochen werden sollen stehen alle im Body-Teil.
            es tut sich leider nichts, im IE wird in der Statuszeile "Fehler auf der Seite" angegeben.
            :(
            mfg Vivian M.

            1. habe d'ehre

              Klappt leider immer noch nicht (stelle mich doof an?), also:
              habe das obrige Script soweit eingefügt,
              und zusätzlich im <body>-Tag onLoad="hideNav(MenuDiv);" -> MenuDiv ist die id des <div>.
              Die <div>, die angesprochen werden sollen stehen alle im Body-Teil.
              es tut sich leider nichts, im IE wird in der Statuszeile "Fehler auf der Seite" angegeben.

              Nun ja, gedankenlesen liegt mir fern, die Glaskugel hat heute ihren freien Tag. Ein Link oder der Code wirken in solchen Faellen Wunder.

              --
              carpe diem
              Wilhelm
              1. okay, hier nu ein Auszug aus dem quellcode:
                <head>
                [...]
                <script language="text/javascript">
                <!--
                // verstecken Layer fuer 2.Ebene
                function hideNav(divid)
                {
                if (browser=="W3Cdom"){document.getElementById(divid).style.visibility="hidden";}
                if (browser=="Netscape"){document.layers[divid].visibility="hide";}
                if (browser=="Explorer"){document.all[divid].style.visibility="hidden";}
                }
                // einschalten Layer fuer 2.Ebene
                function showNav(divid)
                {
                if (browser=="W3Cdom"){document.getElementById(divid).style.visibility="visible";}
                if (browser=="Netscape"){document.layers[divid].visibility="show";}
                if (browser=="Explorer"){document.all[divid].style.visibility="visible";}
                }
                -->
                </script>
                </head>
                <!--Hintergrundbild ist in portal.css festgelegt-->
                <body onLoad="hideNav('MenuDiv');">
                <!--wenn der Cursor auf diese Bild zeigt, soll sich ein kleines Menu öffnen-->
                <div style="position:absolute; top:50px; left:50px; width:85px; height:85px;"><a href="/navi/punk1.html"><img src="/images/pic1.gif" onMouseOver="this.src='/images/pic1b.gif';showNav('MenuDiv');"
                onMouseOut="this.src='/images/pic1.gif';hideNav('MenuDiv');" border="0" alt="punkt1"></a></div>
                <!--die ist das menu-->
                <div id="MenuDiv" style="position:absolute; top:6px; left:141px; width:84px; height:84px; background-color:white;"></div>
                <div style="position:absolute; top:7px; left:141px; width:84px; height:5px; font-family:Arial,Sans-Serif,Helvetica; font-size:7pt;"> &Uuml;bersicht</div>
                <div style="position:absolute; top:17px; left:141px; width:84px; height:5px; font-family:Arial,Sans-Serif,Helvetica; font-size:7pt;"> Fotos</div>
                <div style="position:absolute; top:27px; left:141px; width:84px; height:5px; font-family:Arial,Sans-Serif,Helvetica; font-size:7pt;"> Impressum</div>
                <div style="position:absolute; top:37px; left:141px; width:84px; height:5px; font-family:Arial,Sans-Serif,Helvetica; font-size:7pt;"> Kontakt</div>
                <div style="position:absolute; top:47px; left:141px; width:84px; height:5px; font-family:Arial,Sans-Serif,Helvetica; font-size:7pt;"> Forum</div>
                <div style="position:absolute; top:57px; left:142px; width:84px; height:5px; font-family:Arial,Sans-Serif,Helvetica; font-size:7pt;"> Diverses</div>
                </div>
                </body>

                ich hoffe weiterhin, dass ich das noch gebacken kriege.. hab bisher eigentlich gedacht, dass es nicht so kompliziert wird... :/

                mfg Vivian M. ;)

                1. habe d'ehre

                  <script language="text/javascript">

                  Fehler 1

                  <script language="javascript" type="text/javascript">

                  <div id="MenuDiv" style="position:absolute; top:6px; left:141px; width:84px; height:84px; background-color:white;"></div>

                  Fehler 2

                  Du schliesst hier den <div>
                  Dein Menue wird dadurch nicht mehr ueber "MenuDiv" ansprechbar

                  Fehler 3

                  Dier fehlt
                  var browser , os , version ;

                  if (document.getElementById)
                  {browser = 'W3Cdom';}
                  if (document.layers)
                  {browser = 'Netscape';}
                  if (document.all && !document.getElementById)
                  {browser = 'Explorer';}

                  --
                  carpe diem
                  Wilhelm
                  1. Fehler 2

                    Du schliesst hier den <div>
                    Dein Menue wird dadurch nicht mehr ueber "MenuDiv" ansprechbar

                    immerhin dieser Fehler war mir bewusst :) das habe ich lediglich erst einmal provisorisch so gelassen. Funktioniert jetzt soweit. Habe damit schon fast geschafft was ich heute schaffen wollte (habe noch 2 andere Navigationen implementiert).

                    Vielen Dank Wilhelm für deine Hilfe, ich hoffe, dass ich das auch mal problemloser hinkriegen werde (fleißig am Üben bin ich ja schon).

                    mfg Vivian M. :)

            2. habe d'ehre

              und zusätzlich im <body>-Tag onLoad="hideNav(MenuDiv);" -> MenuDiv ist die id des <div>.

              dann hideNav('MenuDiv');

              --
              carpe diem
              Wilhelm
  2. Hi,

    Nu möchte ich allerdings noch, dass sich beim Rüberfahren ein kleines Menu öffnet (ebenfalls in einem <div> - wegen der Positionierung). Kann ich das in einer function definieren (bisher klappt das nicht)?

    Eine wird da nicht langen... hier habe ich noch einen test rumliegen, der Dir _einen_ Loesungsansatz aufzeigt: http://www.wendenburg.de/test/divNaviStat.html
    Problem bei solchen Menues ist oft dass sie vorzeitig zuklappen, weil die Mausbewegung auf einen Link ebenfalls als Div-Mouseout interpretiert wird. Hier wird nach einem Timeout nochmals auf Mousebewegung im Div geprueft, bevor das Div wieder versteckt wird

    hth & Gruesse  Joachim

    1. soo, ich danke dir erstmal für deine Hilfe.
      Werde mal versuchen, das auf meine Verwendung anzupassen, auch wenn es sehr kompliziert aussieht.
      mfg Vivian M.