m@y: wechsel zwischen Mouseover und Mouseout

Beitrag lesen

Tag,

ich hab ein kleines Problem: Ich hab ein Pulldown Menü definiert, das auklappt, sobald man mit der Maus darüber fährt. Es sollte eigentlich erst zurückfahren, wenn man mit der Maus den Bereich verlässt. Irgenwie registriert der aber, sobald man die Maus bewegt, das sie aus dem Bereich geht und direkt wieder rein, was zu einem dauerndem Wechsel zwischen Auf und zu führt. Kann mir da jemand helfen?

Hier mal der Quelltext:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN">
<html>
 <head>
  <title>aufklappen</title>
  <meta name="generator" content="HTML Studio">
  <script language="JavaScript">
  var secondstatus;
  var secondoffen;
  var secondzu;
  var fthirdstatus;
  var fthirdoffen;
  var fthirdzu;
  var welche;
  function definieren()
  {
   secondstatus = "zu";
   secondoffen = 90;
   secondzu = 0;
   fthirdstatus = "zu";
   fthirdoffen = 50;
   fthirdzu = 0;
  }
  function gross(ebene)
  {
   welche = ebene;
   eval("var zuerst = " + ebene + "zu;");
   eval("var danach = " + ebene + "offen;");
   eval("var status = " + ebene + "status;");
   if((status == "offen")&&())
   {
    alert(
   }
   else if(status == "zu")
   {
    eval("document.all." + ebene + ".style.display = '';");
    zuerst = zuerst*1+1;
    danach = danach*1-1;
    eval("document.all." + ebene + ".style.height = '" + zuerst + "px';");
    eval(ebene + "zu = zuerst;");
    eval(ebene + "offen = danach;");
    if(danach == 0)
    {
     eval(ebene + 'status = "offen";');
     eval("document.all." + ebene + ".style.overflow = '';");
    }
    else if(danach > 1)
    {
     window.setTimeout("gross(welche)", 1);
    }
   }
   else if(status == "offen")
   {
    eval("document.all." + ebene + ".style.overflow = 'hidden';");
    zuerst = zuerst*1-1;
    danach = danach*1+1;
    eval("document.all." + ebene + ".style.height = '" + zuerst + "px';");
    eval(ebene + "zu = zuerst;");
    eval(ebene + "offen = danach;");
    if(zuerst == 0)
    {
     eval(ebene + 'status = "zu";');
     eval("document.all." + ebene + ".style.display = 'none';");
    }
    else if(zuerst > 1)
    {
     window.setTimeout("gross(welche)", 1);
    }
   }
  }
  function hervorheben (ebene, css)
  {
   eval("document.all." + ebene + ".style.background = '" + css + "';");
  }
  </script>
 </head>
 <body onLoad="definieren();">
 Hello, World!<br>
  <div id="box1" style="position:absolute; background:#00CCFF;" onMouseOver="gross('second')" onMouseOut="gross('second')">
     box1
     <div id="second" style="position:absolute; top:1.1em; left:0px; overflow:hidden; width:100px; height:0px; background:#00CCFF; display:none;">
        box1 <br>
        hallo<br>
      <div id="fthirdh" style="position:absolute; background:#00CCFF; top:2.4em; left:0px; width:100px;" onMouseOver="hervorheben('fthirdh', '#3366FF'); gross('fthird','','0','50');" onMouseOut="hervorheben('fthirdh', '#00CCFF'); gross1('fthird', 'none','50','0')">
        test
         <div id="fthird" style="position:absolute; top:0em; left:100px; overflow:hidden; width:100px; height:0px; background:#00CCFF;">
          hallo,
         </div>
      </div>
      <div id="ffourh" style="position:absolute; background:#00CCFF; top:3.5em; left:0px; width:100px;" onMouseOver="hervorheben('ffourh', '#3366FF'); gross1('ffour','','0','50')" onMouseOut="hervorheben('ffourh', '#00CCFF'); gross1('ffour', 'none','50','0')">
        test2
        <div id="ffour" style="position:absolute; top:0em; left:100px; background:#00CCFF; display:none; width:100px; height:0px;">
         hallo
        </div>
      </div>
    </div>
  </div>
  <br>
 Hallo,

</body>
</html>

Wäre echt sehr nett wenn mir da jemand weiterhelfen würde.

cu, Stefan