Johannes: Menü in DHTML

Hallo *,

ich versuche gerade mir eine Menü zu bastelen mit DHTML.
Leider klappt es nicht so wie ich es gerne hätte.
Wenn ich auf das Menü klicke erscheinen zwar die Menüeintrage,
allerdings verschwindet das Menü, sobald ich auf diverse
Menüeintrage klicken möchte. Ich habe aber das Div-Element
groß genug eingestellt, so dass ich nicht den Bereich
beim Auswählen verlassen???
Könnte mir bitte jemand helfen?

Hier mein Code (einfach kopieren und ausprobieren):

<html><head><title>visibility</title>
<script language="JavaScript" type="text/javascript">
<!--
function show(wet) {
 if(wet == 19) {
   document.getElementById("Ueberschrift").style.visibility = "visible";
   document.getElementById("Ueberschrift").style.zindex = 1;
   document.getElementById("ist").style.zindex = 0;
 }

}

function delet(iw) {

iw.style.visibility = "hidden";

}

//-->
</script>
</head><body bgcolor="FFFFFF" text="#000000">

<h1  style="visibility:hidden">Die &Uuml;berschrift zum Text</h1>
<p>Hier der Text. Aber fehlt da nicht was?</p>

<div id="ist" onClick="show(19)" style="background:red; border:solid 2px blue; width:70px; position:absolute;
 top:120px; left:10px;" >Anzeigen!</div>

<div id="Ueberschrift"
     style="position:absolute; top:140px; left:10px; width:80px; height:150px; visibility:hidden; background:red;"
     onMouseout="delet(this)">
 <a href="test.html">Uhrzeit anzeigen</a>
 <a href="http://www.google.de">Google</a>
</div>

</body></html>

Vielen Dank und Gruß
Johannes

  1. Hier, hab mal ein wenig rumgedoktort. Funktioniert jetzt soweit...;)

    <html><head><title>visibility</title>
    <script language="JavaScript" type="text/javascript">
    <!--
    function show(wet) {
     if(wet == 19) {
       document.getElementById("Ueberschrift").style.visibility = "visible";
       document.getElementById("Ueberschrift").style.zindex = 1;
       document.getElementById("ist").style.zindex = 0;
     }
    }

    function del(iw) {

    iw.style.visibility = "hidden";

    }

    //-->
    </script>
    </head><body bgcolor="FFFFFF" text="#000000">

    <h1  style="visibility:hidden">Die &Uuml;berschrift zum Text</h1>
    <p>Hier der Text. Aber fehlt da nicht was?</p>

    <div id="ist" onMouseover="show(19)" style="background:red; border:solid 2px blue; width:70px; position:absolute;
     top:120px; left:10px;" >Anzeigen!

    <div id="Ueberschrift"
         style="position:absolute; top:10px; left:10px; width:80px; height:150px; visibility:hidden; background:red;" onmouseout="del(this)">
     <a href="test.html">Uhrzeit anzeigen</a>
     <a href="http://www.google.de">Google</a>
    </div></div>

    </body></html>

    1. Hallo,

      document.getElementById("Ueberschrift").style.zindex = 1;
         document.getElementById("ist").style.zindex = 0;

      Auch wenn das nicht der Fehler gewesen sein mag: zIndex schreibt man mit grossem I.

      Gute Nacht, Mülli

      --
      Viva Colonia!
      1. Euche beiden herzlichsten Dank!

        Hallo,

        document.getElementById("Ueberschrift").style.zindex = 1;
           document.getElementById("ist").style.zindex = 0;

        Auch wenn das nicht der Fehler gewesen sein mag: zIndex schreibt man mit grossem I.

        Gute Nacht, Mülli

    2. Herzlichsten Danke

      Lieben Gruß
      JOhannes

      Hier, hab mal ein wenig rumgedoktort. Funktioniert jetzt soweit...;)

      <html><head><title>visibility</title>
      <script language="JavaScript" type="text/javascript">
      <!--
      function show(wet) {
       if(wet == 19) {
         document.getElementById("Ueberschrift").style.visibility = "visible";
         document.getElementById("Ueberschrift").style.zindex = 1;
         document.getElementById("ist").style.zindex = 0;
       }
      }

      function del(iw) {

      iw.style.visibility = "hidden";

      }

      //-->
      </script>
      </head><body bgcolor="FFFFFF" text="#000000">

      <h1  style="visibility:hidden">Die &Uuml;berschrift zum Text</h1>
      <p>Hier der Text. Aber fehlt da nicht was?</p>

      <div id="ist" onMouseover="show(19)" style="background:red; border:solid 2px blue; width:70px; position:absolute;
       top:120px; left:10px;" >Anzeigen!

      <div id="Ueberschrift"
           style="position:absolute; top:10px; left:10px; width:80px; height:150px; visibility:hidden; background:red;" onmouseout="del(this)">
       <a href="test.html">Uhrzeit anzeigen</a>
       <a href="http://www.google.de">Google</a>
      </div></div>

      </body></html>