[JavaScript] DIV nach abgelaufener Zeit verstecken

[Krain]

<style type="text/css">

<!--

.hider {position:relative}

.hider .logintable {position:absolute;top:0;left:0;visibility:hidden;height:0px;background-color:transparent}

.hider:hover .logintable {visibility:visible;height:auto;position:relative;}

-->

</style>

     <div class="info" >

       <a href="#" class="hider">Test

       <div class="logintable">

       <table style="width:200px;background-color:white">

        <tr>

         <td>Benutzername:</td>

         <td>********</td>

        </tr>

        <tr>

         <td>Passwort:</td>

         <td>********</td>

        </tr>

       </table>

       </div>

       </a>

</div>

     </div>

[/PHP]

Es geht mir hierbei um das DIV .logintable. Hier funktioniert nur, dass das DIV angezeigt, bzw. versteckt wird, wenn ich über den LINK #hider fahre.

Ich brauche aber noch eine zeitliche Steuerung darin, falls der Anwender mit der Maus über dem Link bleibt. In diesem Fall soll sich das DIV .logintable nach einer bestimmten Zeit wieder schließen. Ich kenne mich in JavaScript nicht so toll aus. Klar ist mir, dass ich beim onMouseOver die Zeit zurück schreiben muss. Aber wie zähle ich diese runter.

Kann mir jemand für dieses Problem einen Ansatz geben?

danke

markus

[kills]

Hi

ich hab leider keine Zeit für größere Erklärungen:

function abc() {

  var a = new date();

  // do something

  var b = new date();


  var diff = a.getMilliseconds() - b.getMilliseconds();

}

siehe

http://de.selfhtml.org/javascript/objekte/date.htm

Gruß,

Markus

[Krain]

Die date-Funktion habe ich inzwischen auch gefunden.

Damit kann ich auch arbeiten. Mir geht es aber weniger um die Zeitfunktionen als mehr um die Schleife.

Kann ich einfach in die onMouseOver-Funktion eine Schleife einbauen, die diese Zeit runter zählt und dann das DIV schließt?

Man kann sich doch auch dynamische Uhren mit JS schreiben!? Ich dachte das funktioniert irgentwie wie ein eigener Thread. Ich hoffe ihr versteht, was ich meine.

Näher Erläuterung (so soll es vor sich gehen):

- der User kommt auf die Seite mit diesem Link

- Er fährt mit der Mouse darüber - meine Funktion wird gestartet

- er bewegt jetzt die Mouse für Bsp. 20 Sek. nicht (das möchte ich mitzählen), sind diese 20 Sek. verstrichen möchte ich mit JS das DIV wieder verstecken.

- verlässt er vorher mit der Mouse den Link wird das DIV über CSS versteckt.

Ich hoffe meine Erklärungen machten den Sachverhalt etwas deutlicher.

[Krain]

<script language="JavaScript">

<!--


   var active;

   function waiter() {

     document.getElementById("showBox").style.display = "none";

   }


   function timer() {

     document.getElementById("showBox").style.display = "block";

     if(active) {

       clearTimeout(active);

     }

     active = window.setTimeout("waiter()","10000");

   }


   function timerOff() {

     document.getElementById("showBox").style.display = "none";

     if(active) {

       clearTimeout(active);

     }

   }

//-->

</script>

<noscript></noscript>

<style type="text/css">

<!--

.hider	    {position:relative}

.hider a     {font-weight: bold; text-decoration:none}

.hider a span{display:none;}

.hider a:hover { text-decoration: none;background-color: transparent;}

.hider a:hover #showBox {display:block;position:absolute;margin:0 auto;left:0px;top:20px;}

* html .hider a:hover #showBox {position:absolute;left:0px;top:20px;}


.table {width:200px;margin:0px auto; border:1px solid green;background-color:#ECFDE7;}

.table tr {background-color:transparent}

.table td {padding:5px;border:none;background-color:transparent}

-->

</style>

       <div class="hider">

       <a href="#" onMouseOver="timer()" onMouseOut="timerOff()"><strong>Hier erfahren Sie Ihre Zuganskennung (fahren Sie mit der Maus über diesen Link, um die Zugangsdaten anzuzeigen):</strong>

       <span id="showBox"><br>

       <table class="table">

        <tr>

         <td>Benutzername:</td>

         <td>********</td>

        </tr>

        <tr>

         <td>Passwort:</td>

         <td>********</td>

        </tr>

       </table>

       </span>

       </a>

       </div>[/PHP]

So funktioniert es nun bgei mir. Mich wundert allerdings nur, dass ich eine extra Funktion onMouseOut implementieren musste. Ich habe eigentlich damit gerechnet, dass nachdem das DIV von JS versteckt wurde es auch wieder auf ein onMouseOver reagieren würde. Dies war aber nicht der Fall, deshalb habe ich in der timer() und timerOff() die Anzeige an- bzw abgeschaltet. Ich hoffte eigentlich, dass ich das über CSS steuern könnte.

Weiß einer, warum CSS :hover nicht mehr funktioniert, wenn ich das style eines Objektes über JS bearbeitet habe?