fireWURMxxl: Navi geht nicht!!! Problem: "changeStyleById('name','none');"

Erst mal der Code der Navi:
<script type="text/javascript">
<!--
document.write("<style>#e1 {display : none;}</style>")
document.write("<style>#e2 {display : none;}</style>")
document.write("<style>#e3 {display : none;}</style>")
document.write("<style>#e4 {display : none;}</style>")
document.write("<style>#e5 {display : none;}</style>")
-->
</script>
<noscript>
<style>
#e1 {display : block;}
#e2 {display : block;}
#e3 {display : block;}
#e4 {display : block;}
#e5 {display : block;}
</style>
</noscript>
<style>
body {
 background : #fff;
 color : #000;
}

body, div, span, a, p, h1, h2, h3 {
 font-family : verdana, Geneva, Arial, Helvetica, sans-serif;
}

#text {
 width : 100%;
 float : left;
 background : #ccc;
}

#nav {
 width : 100%;
 float : left;
 background-image : url(bg2.png);
 background-position : top right;
}

/* Für Navi */
.klick {
 padding : 3px 15px 3px 15px;
 margin-bottom: -1px;
 font-family : arial;
 cursor : pointer;
 cursor : hand;
}
</style>
<script type="text/javascript">
<!--
    function changeStyleById(el,ds) {
               if (document.getElementById) {
                  var nodeObj = document.getElementById(el)
                  nodeObj.style.display = ds;
                  }
           }
//-->
</script>
</head>

<div id="nav">
<script LANGUAGE="JavaScript">
<!--
var name = navigator.appName
if (name == "Microsoft Internet Explorer")
document.write("<fieldset>");

-->
</script>

<table><tr>
 <td><div onMouseover="changeStyleById('e1','block'); changeStyleById('e2','none'); changeStyleById('e3','none'); changeStyleById('e4','none'); changeStyleById('e5','none');" style="border:1px solid #aaaaaa; left:200px;top:50px; -moz-border-radius:10px; -khtml-border-radius:30px;">Profil
 </div></td>

<td><div onMouseover="changeStyleById('e2','block'); changeStyleById('e1','none'); changeStyleById('e3','none'); changeStyleById('e4','none'); changeStyleById('e5','none');" style="border:1px solid #aaaaaa; left:200px;top:50px; -moz-border-radius:10px; -khtml-border-radius:30px;">Chat
 </div></td>

<td><div onMouseover="changeStyleById('e3','block'); changeStyleById('e1','none'); changeStyleById('e2','none'); changeStyleById('e4','none'); changeStyleById('e5','none');" style="border:1px solid #aaaaaa; left:200px;top:50px; -moz-border-radius:10px; -khtml-border-radius:30px;">Forum
 </div></td>
 </tr></table>
</form><form action="#" name="raum" method="post"><div id="e2">
<noscript>Chat</noscript><select name="raum" size="">
<optgroup label="&Ouml;ffentliche R&auml;ume">
<option value="funroom" selteced>Funroom</option>
<option value="date"            >Date</option>
<option value="tisch"           >Stammtisch</option>
<optgroup label="Themenbezogene R&auml;ume">
<option value="pc"              >Computertreffpunkt</option>
<option value="rap"             >Hip-Hopzone</option>
<option value="witze"           >Witze und R&auml;tselfun</option>
<option value="bauer"           >Bauern- & Tierhof</option>
<option value="mathe"           >Wissenschafts & Schulzone</option>
<option value="musik"           >Musikroom</option>
<optgroup label="Altersbegrenzte R&auml;ume">
<option value="gym"             >Gymnasium & Hauptschule</option>
<option value="12"              >Unter 12</option>
<option value="studi"           >Studenten- und Lehrlingschat</option>
<option value="20"              >20-up-room</option>
<option value="50"              >50 and more</option>
<option value="best"            >in the best years</option>
<option value="alt"             >Greisroom</option>
<optgroup label="Private R&auml;ume">
<!-- Neue Raeume -->
</select></fieldset><input type="Submit" name="submit" value="Los!"></form></font></div>

<div id="e3">
<form action="#" name="raum" method="post">
<noscript>Forum</noscript><select name="raum" size="">
<optgroup label="Programmierer-, FUNROOM- & Computerforum">
<!-- Programmiererforum Neu -->
<optgroup label="Musik- & Entertainmendforum">
<!-- Musikforum Neu -->
<optgroup label="Sch&ouml;nheits- & Modeforum">
<!-- Schoenheitsforum Neu -->
<optgroup label="Kulinarit&auml;ten- & Kalorienabbauforum">
<!-- Kulinaritaetenforum Neu -->
<optgroup label="Wissenschafts-, Bildungs- & Studentenforum">
<!-- Wissenschaftsforum Neu -->
<optgroup label="Kinder- & Familienforum">
<!-- Kinderforum Neu -->
<optgroup label="Elektronik-, Media- & Automobilforum">
<!-- Elektronikforum Neu -->
<optgroup label="Wirtschaft-, Umwelt-, News- & Politikforum">
<!-- Elektronikforum Neu -->
</select></fieldset><input type="Submit" name="submit" value="Los!"></form>

Das Problem:
onMouseover="changeStyleById('e3','block'); changeStyleById('e1','none'); changeStyleById('e2','none'); changeStyleById('e4','none'); changeStyleById('e5','none');"

Das sollte bewirken, dass e3 angezeigt wird und alle anderen Menüpunkte geschlossen werden! Das changeStyleById('e3','block'); funktioniert problemlos, nur changeStyleById('e1','none'); changeStyleById('e2','none'); changeStyleById('e4','none'); changeStyleById('e5','none'); wird einfach nicht ausgeführt. Ich habe nur einen Menüpunkt als Beispiel genommen, aber der 'none'-Fehler ist auch bei den anderen Punkten so. Das ist in allen Browsern, mit denen ich die Navi getestet habe so! Bitte keine Fachbegriffe, sondern in Babysprache, da ich zwar CSS, HTML und ein b. PHP kann, aber überhaupt kein JS.

LG fireWURMxxl

  1. Hi,

    du öffnest mit:

    <form action="#" name="raum" method="post"><div id="e2">

    und schließt mit:

    </form></div>

    Außerdem gibt es keinen DIV mit der ID "e1" -> kann also auch nicht gefunden werden...

    Grüße - Frank

    1. <script type="text/javascript">
      <!--
      document.write("<style>#e1 {display : none;}</style>")
      document.write("<style>#e2 {display : none;}</style>")
      document.write("<style>#e3 {display : none;}</style>")
      document.write("<style>#e4 {display : none;}</style>")
      document.write("<style>#e5 {display : none;}</style>")
      -->
      </script>
      <noscript>
      <style>
      #e1 {display : block;}
      #e2 {display : block;}
      #e3 {display : block;}
      #e4 {display : block;}
      #e5 {display : block;}
      </style>
      </noscript>
      <style>
      body {
      background : #fff;
      color : #000;
      }

      body, div, span, a, p, h1, h2, h3 {
      font-family : verdana, Geneva, Arial, Helvetica, sans-serif;
      }

      #text {
      width : 100%;
      float : left;
      background : #ccc;
      }

      #nav {
      width : 100%;
      float : left;
      background-image : url(bg2.png);
      background-position : top right;
      }

      /* Für Navi */
      .klick {
      padding : 3px 15px 3px 15px;
      margin-bottom: -1px;
      font-family : arial;
      cursor : pointer;
      cursor : hand;
      }
      </style>
      <script type="text/javascript">
      <!--
          function changeStyleById(el,ds) {
                     if (document.getElementById) {
                        var nodeObj = document.getElementById(el)
                        nodeObj.style.display = ds;
                        }
                 }
      //-->
      </script>
      </head>

      <div id="nav">
      <script LANGUAGE="JavaScript">
      <!--
      var name = navigator.appName
      if (name == "Microsoft Internet Explorer")
      document.write("<fieldset>");

      -->
      </script>

      <table><tr>
      <td><div onMouseover="changeStyleById('e1','block'); changeStyleById('e2','none'); changeStyleById('e3','none'); changeStyleById('e4','none'); changeStyleById('e5','none');" style="border:1px solid #aaaaaa; left:200px;top:50px; -moz-border-radius:10px; -khtml-border-radius:30px;">Profil
      </div></td>

      <td><div onMouseover="changeStyleById('e2','block'); changeStyleById('e1','none'); changeStyleById('e3','none'); changeStyleById('e4','none'); changeStyleById('e5','none');" style="border:1px solid #aaaaaa; left:200px;top:50px; -moz-border-radius:10px; -khtml-border-radius:30px;">Chat
      </div></td>

      <td><div onMouseover="changeStyleById('e3','block'); changeStyleById('e1','none'); changeStyleById('e2','none'); changeStyleById('e4','none'); changeStyleById('e5','none');" style="border:1px solid #aaaaaa; left:200px;top:50px; -moz-border-radius:10px; -khtml-border-radius:30px;">Forum
      </div></td>
      </tr></table>
      </form>
      <div id="e1">Profil</div>
      <form action="#" name="raum" method="post"><div id="e2">
      <noscript>Chat</noscript><select name="raum" size="">
      <optgroup label="&Ouml;ffentliche R&auml;ume">
      <option value="funroom" selteced>Funroom</option>
      <option value="date"            >Date</option>
      <option value="tisch"           >Stammtisch</option>
      <optgroup label="Themenbezogene R&auml;ume">
      <option value="pc"              >Computertreffpunkt</option>
      <option value="rap"             >Hip-Hopzone</option>
      <option value="witze"           >Witze und R&auml;tselfun</option>
      <option value="bauer"           >Bauern- & Tierhof</option>
      <option value="mathe"           >Wissenschafts & Schulzone</option>
      <option value="musik"           >Musikroom</option>
      <optgroup label="Altersbegrenzte R&auml;ume">
      <option value="gym"             >Gymnasium & Hauptschule</option>
      <option value="12"              >Unter 12</option>
      <option value="studi"           >Studenten- und Lehrlingschat</option>
      <option value="20"              >20-up-room</option>
      <option value="50"              >50 and more</option>
      <option value="best"            >in the best years</option>
      <option value="alt"             >Greisroom</option>
      <optgroup label="Private R&auml;ume">
      <!-- Neue Raeume -->
      </select></fieldset><input type="Submit" name="submit" value="Los!"></form></font></div>

      <div id="e3">
      <form action="#" name="raum" method="post">
      <noscript>Forum</noscript><select name="raum" size="">
      <optgroup label="Programmierer-, FUNROOM- & Computerforum">
      <!-- Programmiererforum Neu -->
      <optgroup label="Musik- & Entertainmendforum">
      <!-- Musikforum Neu -->
      <optgroup label="Sch&ouml;nheits- & Modeforum">
      <!-- Schoenheitsforum Neu -->
      <optgroup label="Kulinarit&auml;ten- & Kalorienabbauforum">
      <!-- Kulinaritaetenforum Neu -->
      <optgroup label="Wissenschafts-, Bildungs- & Studentenforum">
      <!-- Wissenschaftsforum Neu -->
      <optgroup label="Kinder- & Familienforum">
      <!-- Kinderforum Neu -->
      <optgroup label="Elektronik-, Media- & Automobilforum">
      <!-- Elektronikforum Neu -->
      <optgroup label="Wirtschaft-, Umwelt-, News- & Politikforum">
      <!-- Elektronikforum Neu -->
      </select></fieldset><input type="Submit" name="submit" value="Los!"></form>

      Ich habe e1 vergessen. Oben habe ich es im Code eingefügt. Tut mir Leid, euch unabsichtlich einen alten, falschem Quelltext gegeben habe. Aber das ändert nichts, den auch bei den anderen Menüpunkten geht das ned!

      lg feuerwurmXXL

      1. Du hast auch e3 bis e5 vergessen! JS bricht dann ab. Füg einfach die Elemente ein, die du "ansprichst", dann funktionierts auch.

        Grüße - Frank

        ->
        <html>
        <head>
        <title>Terra Recall | Div Samples</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        </head>
        <body>
        <script type="text/javascript">
        <!--
        document.write("<style>#e1 {display : none;}</style>")
        document.write("<style>#e2 {display : none;}</style>")
        document.write("<style>#e3 {display : none;}</style>")
        document.write("<style>#e4 {display : none;}</style>")
        document.write("<style>#e5 {display : none;}</style>")
        -->
        </script>
        <noscript>
        <style>
        #e1 {display : block;}
        #e2 {display : block;}
        #e3 {display : block;}
        #e4 {display : block;}
        #e5 {display : block;}
        </style>
        </noscript>
        <style>
        body {
         background : #fff;
         color : #000;
        }

        body, div, span, a, p, h1, h2, h3 {
         font-family : verdana, Geneva, Arial, Helvetica, sans-serif;
        }

        #text {
         width : 100%;
         float : left;
         background : #ccc;
        }

        #nav {
         width : 100%;
         float : left;
         background-image : url(bg2.png);
         background-position : top right;
        }

        /* Für Navi */
        .klick {
         padding : 3px 15px 3px 15px;
         margin-bottom: -1px;
         font-family : arial;
         cursor : pointer;
         cursor : hand;
        }
        </style>
        <script type="text/javascript">
        <!--
            function changeStyleById(el,ds) {
                       if (document.getElementById) {
                          var nodeObj = document.getElementById(el)
                          nodeObj.style.display = ds;
                          }
                   }
        //-->
        </script>

        <div id="nav">
        <script LANGUAGE="JavaScript">
        <!--
        var name = navigator.appName
        if (name == "Microsoft Internet Explorer")
        document.write("<fieldset>");

        -->
        </script>

        <table><tr>
         <td><div onMouseover="changeStyleById('e1','block'); changeStyleById('e2','none'); changeStyleById('e3','none'); changeStyleById('e4','none'); changeStyleById('e5','none');" style="border:1px solid #aaaaaa; left:200px;top:50px; -moz-border-radius:10px; -khtml-border-radius:30px;">Profil
         </div></td>

        <td><div onMouseover="changeStyleById('e2','block'); changeStyleById('e1','none'); changeStyleById('e3','none'); changeStyleById('e4','none'); changeStyleById('e5','none');" style="border:1px solid #aaaaaa; left:200px;top:50px; -moz-border-radius:10px; -khtml-border-radius:30px;">Chat
         </div></td>

        <td><div onMouseover="changeStyleById('e3','block'); changeStyleById('e1','none'); changeStyleById('e2','none'); changeStyleById('e4','none'); changeStyleById('e5','none');" style="border:1px solid #aaaaaa; left:200px;top:50px; -moz-border-radius:10px; -khtml-border-radius:30px;">Forum
         </div></td>
         </tr></table>
         <form action="#" name="raum" method="post"><div id="e1">
        <noscript>Chat</noscript><select name="raum" size="">
        <optgroup label="&Ouml;ffentliche R&auml;ume">
        <option value="funroom" selteced>Funroom</option>
        <option value="date"            >Date</option>
        <option value="tisch"           >Stammtisch</option>
        <optgroup label="Themenbezogene R&auml;ume">
        <option value="pc"              >Computertreffpunkt</option>
        <option value="rap"             >Hip-Hopzone</option>
        <option value="witze"           >Witze und R&auml;tselfun</option>
        <option value="bauer"           >Bauern- & Tierhof</option>
        <option value="mathe"           >Wissenschafts & Schulzone</option>
        <option value="musik"           >Musikroom</option>
        <optgroup label="Altersbegrenzte R&auml;ume">
        <option value="gym"             >Gymnasium & Hauptschule</option>
        <option value="12"              >Unter 12</option>
        <option value="studi"           >Studenten- und Lehrlingschat</option>
        <option value="20"              >20-up-room</option>
        <option value="50"              >50 and more</option>
        <option value="best"            >in the best years</option>
        <option value="alt"             >Greisroom</option>
        <optgroup label="Private R&auml;ume">
        <!-- Neue Raeume -->
        </select><input type="Submit" name="submit" value="Los!"></div></form>

        <form action="#" name="raum" method="post"><div id="e2">
        <noscript>Chat</noscript><select name="raum" size="">
        <optgroup label="&Ouml;ffentliche R&auml;ume">
        <option value="funroom" selteced>Funroom</option>
        <option value="date"            >Date</option>
        <option value="tisch"           >Stammtisch</option>
        <optgroup label="Themenbezogene R&auml;ume">
        <option value="pc"              >Computertreffpunkt</option>
        <option value="rap"             >Hip-Hopzone</option>
        <option value="witze"           >Witze und R&auml;tselfun</option>
        <option value="bauer"           >Bauern- & Tierhof</option>
        <option value="mathe"           >Wissenschafts & Schulzone</option>
        <option value="musik"           >Musikroom</option>
        <optgroup label="Altersbegrenzte R&auml;ume">
        <option value="gym"             >Gymnasium & Hauptschule</option>
        <option value="12"              >Unter 12</option>
        <option value="studi"           >Studenten- und Lehrlingschat</option>
        <option value="20"              >20-up-room</option>
        <option value="50"              >50 and more</option>
        <option value="best"            >in the best years</option>
        <option value="alt"             >Greisroom</option>
        <optgroup label="Private R&auml;ume">
        <!-- Neue Raeume -->
        </select><input type="Submit" name="submit" value="Los!"></div></form>

        <div id="e3">
        <form action="#" name="raum" method="post">
        <noscript>Forum</noscript><select name="raum" size="">
        <optgroup label="Programmierer-, FUNROOM- & Computerforum">
        <!-- Programmiererforum Neu -->
        <optgroup label="Musik- & Entertainmendforum">
        <!-- Musikforum Neu -->
        <optgroup label="Sch&ouml;nheits- & Modeforum">
        <!-- Schoenheitsforum Neu -->
        <optgroup label="Kulinarit&auml;ten- & Kalorienabbauforum">
        <!-- Kulinaritaetenforum Neu -->
        <optgroup label="Wissenschafts-, Bildungs- & Studentenforum">
        <!-- Wissenschaftsforum Neu -->
        <optgroup label="Kinder- & Familienforum">
        <!-- Kinderforum Neu -->
        <optgroup label="Elektronik-, Media- & Automobilforum">
        <!-- Elektronikforum Neu -->
        <optgroup label="Wirtschaft-, Umwelt-, News- & Politikforum">
        <!-- Elektronikforum Neu -->
        </select><input type="Submit" name="submit" value="Los!"></form>
        </div>

        <div id="e4">
        <form action="#" name="raum" method="post">
        <noscript>Forum</noscript><select name="raum" size="">
        <optgroup label="Programmierer-, FUNROOM- & Computerforum">
        <!-- Programmiererforum Neu -->
        <optgroup label="Musik- & Entertainmendforum">
        <!-- Musikforum Neu -->
        <optgroup label="Sch&ouml;nheits- & Modeforum">
        <!-- Schoenheitsforum Neu -->
        <optgroup label="Kulinarit&auml;ten- & Kalorienabbauforum">
        <!-- Kulinaritaetenforum Neu -->
        <optgroup label="Wissenschafts-, Bildungs- & Studentenforum">
        <!-- Wissenschaftsforum Neu -->
        <optgroup label="Kinder- & Familienforum">
        <!-- Kinderforum Neu -->
        <optgroup label="Elektronik-, Media- & Automobilforum">
        <!-- Elektronikforum Neu -->
        <optgroup label="Wirtschaft-, Umwelt-, News- & Politikforum">
        <!-- Elektronikforum Neu -->
        </select><input type="Submit" name="submit" value="Los!"></form>
        </div>

        <div id="e5">
        <form action="#" name="raum" method="post">
        <noscript>Forum</noscript><select name="raum" size="">
        <optgroup label="Programmierer-, FUNROOM- & Computerforum">
        <!-- Programmiererforum Neu -->
        <optgroup label="Musik- & Entertainmendforum">
        <!-- Musikforum Neu -->
        <optgroup label="Sch&ouml;nheits- & Modeforum">
        <!-- Schoenheitsforum Neu -->
        <optgroup label="Kulinarit&auml;ten- & Kalorienabbauforum">
        <!-- Kulinaritaetenforum Neu -->
        <optgroup label="Wissenschafts-, Bildungs- & Studentenforum">
        <!-- Wissenschaftsforum Neu -->
        <optgroup label="Kinder- & Familienforum">
        <!-- Kinderforum Neu -->
        <optgroup label="Elektronik-, Media- & Automobilforum">
        <!-- Elektronikforum Neu -->
        <optgroup label="Wirtschaft-, Umwelt-, News- & Politikforum">
        <!-- Elektronikforum Neu -->
        </select><input type="Submit" name="submit" value="Los!"></form>
        </div>

        </body>
        </html>

        1. Ja, das geht!
          Danke f. d. Hilfe!
          fIrEwUrMxXl

          1. Ja, das geht!
            Danke f. d. Hilfe!
            fIrEwUrMxXl

            Da gibt es ein anderes Problem:

            Ich gebe an, dass OnMouseOut alles auf 'none' gestellt werden soll. Aber sobald man aus dem "<div onMouseover="changeStyleById('e1','block'); changeStyleById('e2','none'); changeStyleById('e3','none'); changeStyleById('e4','none'); changeStyleById('e5','none');" style="border:1px solid #aaaaaa; left:200px;top:50px; -moz-border-radius:10px; -khtml-border-radius:30px;">Profil & Groups
             </div>"-Bereich hinaus geht, wird schon alles auf 'none' gestellt. Das hat aber zur Folge, dass wenn man auf e1 fahren will und somit aus dem "<div onMouseover="changeStyleById('e1','block'); changeStyleById('e2','none'); changeStyleById('e3','none'); changeStyleById('e4','none'); changeStyleById('e5','none');" style="border:1px solid #aaaaaa; left:200px;top:50px; -moz-border-radius:10px; -khtml-border-radius:30px;">Profil & Groups
             </div>"-Bereich hinaus fährt, wird alles, noch bevor man auf e1 fährt auf 'none' geschaltet:

            <div id="nav" OnMouseOut="changeStyleById('e1','none'); changeStyleById('e2','none'); changeStyleById('e3','none'); changeStyleById('e4','none'); changeStyleById('e5','none');">
            <script LANGUAGE="JavaScript">
            <!--
            var name = navigator.appName
            if (name == "Microsoft Internet Explorer")
            document.write("<fieldset>");

            -->
            </script>
            <div class="nav">
            <table><tr>

            <td><div onMouseover="changeStyleById('e1','block'); changeStyleById('e2','none'); changeStyleById('e3','none'); changeStyleById('e4','none'); changeStyleById('e5','none');" style="border:1px solid #aaaaaa; left:200px;top:50px; -moz-border-radius:10px; -khtml-border-radius:30px;">Profil & Groups
             </div></td>

            <td><div onMouseover="changeStyleById('e2','block'); changeStyleById('e1','none'); changeStyleById('e3','none'); changeStyleById('e4','none'); changeStyleById('e5','none');" style="border:1px solid #aaaaaa; left:200px;top:50px; -moz-border-radius:10px; -khtml-border-radius:30px;">Chatten
             </div></td>

            <td><div onMouseover="changeStyleById('e3','block'); changeStyleById('e1','none'); changeStyleById('e2','none'); changeStyleById('e4','none'); changeStyleById('e5','none');" style="border:1px solid #aaaaaa; left:200px;top:50px; -moz-border-radius:10px; -khtml-border-radius:30px;">Forum
             </div></td>

            <td><div onMouseover="changeStyleById('e4','block'); changeStyleById('e1','none'); changeStyleById('e2','none'); changeStyleById('e3','none'); changeStyleById('e5','none');" style="border:1px solid #aaaaaa; left:200px;top:50px; -moz-border-radius:10px; -khtml-border-radius:30px;">Dokumente
             </div></td>

            <td><div onMouseover="changeStyleById('e5','block'); changeStyleById('e1','none'); changeStyleById('e2','none'); changeStyleById('e3','none'); changeStyleById('e4','none');" style="border:1px solid #aaaaaa; left:200px;top:50px; -moz-border-radius:10px; -khtml-border-radius:30px;">Games
             </div></td>

            </tr></table>
             <form action="#" name="raum" method="post"><div id="e1">
            <noscript>Profil</noscript><select name="raum" size="">
            <optgroup label="&Ouml;ffentliche R&auml;ume">
            <option value="funroom" selteced>Funroom</option>
            <option value="date"            >Date</option>
            <option value="tisch"           >Stammtisch</option>
            <optgroup label="Themenbezogene R&auml;ume">
            <option value="pc"              >Computertreffpunkt</option>
            <option value="rap"             >Hip-Hopzone</option>
            <option value="witze"           >Witze und R&auml;tselfun</option>
            <option value="bauer"           >Bauern- & Tierhof</option>
            <option value="mathe"           >Wissenschafts & Schulzone</option>
            <option value="musik"           >Musikroom</option>
            <optgroup label="Altersbegrenzte R&auml;ume">
            <option value="gym"             >Gymnasium & Hauptschule</option>
            <option value="12"              >Unter 12</option>
            <option value="studi"           >Studenten- und Lehrlingschat</option>
            <option value="20"              >20-up-room</option>
            <option value="50"              >50 and more</option>
            <option value="best"            >in the best years</option>
            <option value="alt"             >Greisroom</option>
            <optgroup label="Private R&auml;ume">
            <!-- Neue Raeume -->
            </select><input type="Submit" name="submit" value="Los!"></div></form>

            <form action="#" name="raum" method="post"><div id="e2">
            <noscript>Chat</noscript><select name="raum" size="">
            <optgroup label="&Ouml;ffentliche R&auml;ume">
            <option value="funroom" selteced>Funroom</option>
            <option value="date"            >Date</option>
            <option value="tisch"           >Stammtisch</option>
            <optgroup label="Themenbezogene R&auml;ume">
            <option value="pc"              >Computertreffpunkt</option>
            <option value="rap"             >Hip-Hopzone</option>
            <option value="witze"           >Witze und R&auml;tselfun</option>
            <option value="bauer"           >Bauern- & Tierhof</option>
            <option value="mathe"           >Wissenschafts & Schulzone</option>
            <option value="musik"           >Musikroom</option>
            <optgroup label="Altersbegrenzte R&auml;ume">
            <option value="gym"             >Gymnasium & Hauptschule</option>
            <option value="12"              >Unter 12</option>
            <option value="studi"           >Studenten- und Lehrlingschat</option>
            <option value="20"              >20-up-room</option>
            <option value="50"              >50 and more</option>
            <option value="best"            >in the best years</option>
            <option value="alt"             >Greisroom</option>
            <optgroup label="Private R&auml;ume">
            <!-- Neue Raeume -->
            </select><input type="Submit" name="submit" value="Los!"></div></form>

            <div id="e3">
            <form action="#" name="raum" method="post">
            <noscript>Forum</noscript><select name="raum" size="">
            <optgroup label="Programmierer-, FUNROOM- & Computerforum">
            <!-- Programmiererforum Neu -->
            <optgroup label="Musik- & Entertainmendforum">
            <!-- Musikforum Neu -->
            <optgroup label="Sch&ouml;nheits- & Modeforum">
            <!-- Schoenheitsforum Neu -->
            <optgroup label="Kulinarit&auml;ten- & Kalorienabbauforum">
            <!-- Kulinaritaetenforum Neu -->
            <optgroup label="Wissenschafts-, Bildungs- & Studentenforum">
            <!-- Wissenschaftsforum Neu -->
            <optgroup label="Kinder- & Familienforum">
            <!-- Kinderforum Neu -->
            <optgroup label="Elektronik-, Media- & Automobilforum">
            <!-- Elektronikforum Neu -->
            <optgroup label="Wirtschaft-, Umwelt-, News- & Politikforum">
            <!-- Elektronikforum Neu -->
            </select><input type="Submit" name="submit" value="Los!"></form>
            </div>

            <div id="e4">
            <form action="#" name="raum" method="post">
            <noscript>Forum</noscript><select name="raum" size="">
            <optgroup label="Programmierer-, FUNROOM- & Computerforum">
            <!-- Programmiererforum Neu -->
            <optgroup label="Musik- & Entertainmendforum">
            <!-- Musikforum Neu -->
            <optgroup label="Sch&ouml;nheits- & Modeforum">
            <!-- Schoenheitsforum Neu -->
            <optgroup label="Kulinarit&auml;ten- & Kalorienabbauforum">
            <!-- Kulinaritaetenforum Neu -->
            <optgroup label="Wissenschafts-, Bildungs- & Studentenforum">
            <!-- Wissenschaftsforum Neu -->
            <optgroup label="Kinder- & Familienforum">
            <!-- Kinderforum Neu -->
            <optgroup label="Elektronik-, Media- & Automobilforum">
            <!-- Elektronikforum Neu -->
            <optgroup label="Wirtschaft-, Umwelt-, News- & Politikforum">
            <!-- Elektronikforum Neu -->
            </select><input type="Submit" name="submit" value="Los!"></form>
            </div>

            <div id="e5">
            <form action="#" name="raum" method="post">
            <noscript>Forum</noscript><select name="raum" size="">
            <optgroup label="Programmierer-, FUNROOM- & Computerforum">
            <!-- Programmiererforum Neu -->
            <optgroup label="Musik- & Entertainmendforum">
            <!-- Musikforum Neu -->
            <optgroup label="Sch&ouml;nheits- & Modeforum">
            <!-- Schoenheitsforum Neu -->
            <optgroup label="Kulinarit&auml;ten- & Kalorienabbauforum">
            <!-- Kulinaritaetenforum Neu -->
            <optgroup label="Wissenschafts-, Bildungs- & Studentenforum">
            <!-- Wissenschaftsforum Neu -->
            <optgroup label="Kinder- & Familienforum">
            <!-- Kinderforum Neu -->
            <optgroup label="Elektronik-, Media- & Automobilforum">
            <!-- Elektronikforum Neu -->
            <optgroup label="Wirtschaft-, Umwelt-, News- & Politikforum">
            <!-- Elektronikforum Neu -->
            </select><input type="Submit" name="submit" value="Los!"></form>
            </div></div class="nav"></div>

            Ich habe mich bemüht, es so verständlich wiemöglich zu formulieren. wenn ihr trotzdem etwas ned kapiert habt, fragt einfach.

            lg
            feuerWURMxxl

            1. Hi,

              also zunächst finde ich deinen Code etwas "verquer"... Warum packst Du Divs in eine Table?
              Außerdem musst du sorgfältiger codieren! So wie du beim ersten Mal div und form-tag vertauscht hast, schließt du diesmal den <div class="nav"> nicht ab!

              Das andere ist ein rein logisches Problem, dass sich nicht lösen lässt! Entweder es soll ausgeblendet werden oder eben nicht. Überleg dir eine andere Logik, z.B. das onMouseOut auf die e1 bis e5-Element legen.

              Außerdem solltest Du nicht eine bereits vergebenen id-Bezeichner (nav) auch für eine class verwenden.

              Viele Grüße
              Frank

            2. Hallo,

              Ich habe mich bemüht, es so verständlich wiemöglich zu formulieren. wenn ihr trotzdem etwas ned kapiert habt, fragt einfach.

              du wirst zugeben müssen, es ist nicht einfach deinen Code zu überblicken und bevor ich mich auch darin verheddere, möchte ich dich auf diesen Artikel aufmerksam machen: Unobtrusive JavaScript

              und wenn du dann auch zu dem Schluss kommst, dass du eigentlich nur aus einer Liste von Formularen eines einblenden möchtest, ist alles so einfach:

                
              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
                      "http://www.w3.org/TR/html4/strict.dtd">  
              <html>  
              <head>  
              <title>Test ein/ausblenden</title>  
              <style type="text/css">  
              [code lang=css]  
              #nav { list-style-type:none;  }  
              #nav h3 {  
               width:10em;  
               background-color:#ffd;  
               margin:10px 50px 0 0;  
               }  
              #nav.js_activ h3 { cursor:pointer; }  
                
              #nav form {  
               width:400px;  
               margin:0 0 0 200px;  
               display:block;  
               background-color:#ffa;  
               }  
                
              #nav.js_activ form { display:none; }  
              
              

              </style>

              </head>
              <body>
              <h1>Thema</h1>
              <h2>Unterthema</h2>

              <ul id="nav">
              <li><h3>Profil</h3>
               <form action="" ><div>
               <input > abc
               <br><select>
               <option> 123 567</option>
               </select>
               </div></form>
              </li>
              <li><h3>Forum</h3>
               <form action="" ><div>
               <input > abc
               <br><select>
               <option> 123 567</option>
               </select>
               </div></form>
              </li>
              <li><h3>Chat</h3>
               <form action="" ><div>
               <input > abc
               <br><select><option> 123 567</option></select>
               </div></form>
                </li>
              </ul>

              <script type="text/javascript">

                
              window.onload=function() {  
               var nav=document.getElementById("nav");  
               if (!nav ) alert("no 'nav' found");  
                
               nav.className="js_activ";  
               var hx=nav.getElementsByTagName("h3");  
               if (hx) for (var i=0, h; h=hx[i]; i++) {  
                 h.onmouseover= function(){  
                 var nav=this.parentNode.parentNode;  
                 for (var f=this; f ; f = f.nextSibling ) {  
                  if ( f.nodeName.toLowerCase() == "form") {  
                   if (nav.old_f && nav.old_f != f ) nav.old_f.style.display="none";  
                   f.style.display="block";  
                   nav.old_f=f;  // zuletzt actives form merken  
                   break;  
                   }  
                  }  
                 }  
                }  
               }  
                
              
              

              </script>
              </body>
              </html>
              [/code]
              ist solche eine Struktur nicht einfach zu überblicken?

              Gruß plan_B

              --
                   *®*´¯`·.¸¸.·