Jochen Kempf: Zeit mit onMouseOver bzw. onMouseOut ausgeben?

Hallo,
ich würde gerne die Zeit angeben die jemand mit der Maus über einem Element (z.B. Grafik) verweilt. Ich habe mir gedacht das am besten mit den Eventhandlern onMouseOver und onMouseOut zu machen.  Leider funktioniert der unten angeführte Syntax nicht und ich weiß nicht warum! Desweiteren ist mir nicht klar wie ich die Zeit in dem Ausgabefeld des Formulars angeben kann, mit document.form.Eingabe.value = Anfangszeitpunkt; geht es jedenfalls nicht. Wie mache ich es besser?

Syntax:

html><head><title>Test</title>
<script type="text/javascript">
<!--
var Start = new Date();
var Startzeit = Start.getTime();

function AnfangElement() {
var Anfang = new Date();
var Anfangszeit = Anfang.getTime();
var Anfangszeitpunkt =  (Anfangszeit - Startzeit) / 1000;
a3.filters.item(0).enabled = 0;

}

function EndeElement() {
 var Ende = new Date();
 var Endzeit = Ende.getTime();
 var Endzeitpunkt = (Endzeit - Startzeit) / 1000;
 var ZeitAufElement = Endzeitpunkt - Anfangszeitpunkt;
 a3.filters.item(0).enabled = 1;
 alert("Sie waren " + ZeitAufElement + " Sekunden auf dem Element.");
}

// -->
</script>
</head>
<body>
<img src="C:/Eigene Dateien/Eigene Bilder/cepal2.gif" id="a3" style="filter:progid:DXImageTransform.Microsoft.Pixelate(maxsquare=9)" width="200" height="200" onMouseOver="AnfangElement()" onMouseOut="EndeElement()">
<p>
<form name="Zeit" action="">
Zeit in Sekunden: <input type="text" name="Eingabe" readonly>
</form>
</body></html>

  1. Also, als ich gerade am Klo saß kam mir die Idee warum nichts funktioniert. Ich muss natürlich die Variable Anfangszeit global definieren damit die zweite Funktion darauf zugreifen kann. Nur wird in dem Alert-Fenster als Zeit "NaN-Sekunden" angegeben. Was heißt denn das und wie bekomme ich die richtige Zeit da rein?
    Die andere Frage mit dem Eintrag in das Formular konnte ich trotz des kreativen Moments noch nicht lösen.
    Ciao, Jochen.

  2. abend,

    folgendes funktioniert bei mir im IE:

    <html><head><title>Test</title>
    <script type="text/javascript" language="JavaScript">

    var start_time;
    var end_time;

    function starttime() {
     var start = new Date();
     start_time = start.getTime();
    }

    function endtime() {
      var end = new Date();
      end_time = end.getTime();
      computeTimeDiff();
    }

    function computeTimeDiff() {
     var mytime = new Date();
     mytime.setTime( end_time - start_time );
     var mt = end_time - start_time;
      document.getElementById("timedisplay").value = Math.round( mt / 10 / 60 );
    }
    </script>
    </head>
    <body>

    <img src="C:/Eigene Dateien/Eigene Bilder/cepal2.gif" id="a3" style="filter:progid:DXImageTransform.Microsoft.Pixelate(maxsquare=9)"
      width="200" height="200"
      onMouseOver="starttime()"
      onMouseOut="endtime()">
    <p>

    Zeit in Sekunden: <input type="text" id=timedisplay name="Eingabe" readonly size=5>

    </body></html>

    mfg,
    (tanz das)
    Z.N.S.

    --
    <img src="http://www.dmp-web.de/comunicout/neubauten.gif" border="0" alt="">
  3. ich würde gerne die Zeit angeben die jemand mit der Maus über einem Element (z.B. Grafik) verweilt.

    Desweiteren ist mir nicht klar wie ich die Zeit in dem Ausgabefeld des Formulars angeben kann, mit document.form.Eingabe.value = Anfangszeitpunkt; geht es jedenfalls nicht.

    document.form gibt es nicht und da es mehrere Formulare in einem Dokument geben kann, ist document.forms ein Feld, in dem man zum Beispiel mit document.forms["Zeit"].Eingabe.value Dein <input> ansprechen kann.

    function AnfangElement() {
    var Anfang = new Date();
    var Anfangszeit = Anfang.getTime();
    var Anfangszeitpunkt =  (Anfangszeit - Startzeit) / 1000;
    }

    function EndeElement() {
    var Ende = new Date();
    var Endzeit = Ende.getTime();
    var Endzeitpunkt = (Endzeit - Startzeit) / 1000;
    var ZeitAufElement = Endzeitpunkt - Anfangszeitpunkt;
    }

    Stell' Dir vor, Du hast gestern fünf Äpfel bekommen und heute acht. Um die Differenz zu berechnen, benutzt man die Formel ÄpfelHeute - ÄpfelGestern. Warum bringst Du noch eine dritte Komponente hinein, die besagt, wieviele Äpfel Du vor einer Woche hattest?

    Gruß,
      soenk.e

    PS: NaN heißt "Not a Number", die Berechnung schlug also fehl.

    PPS: Benutze bitte die Javascript-Konsole Deines Browsers oder die Option, alle Javascript-Fehler anzuzeigen.

  4. Es geht einfacher:

    <script type="text/javascript">
    <!--
    var Start = new Date();

    var start = new Date();
    var anfang;

    Variabeln und Funktionen sollten immer mit einem kleinen Buchstaben anfangen.

    function anfangElement() {
    anfang = new Date();
    ....
    }

    function endeElement() {

    var ende = new Date();

    var Endzeitpunkt = (Endzeit - Startzeit) / 1000;

    var endZeitpunkt = (ende - start) / 1000;

    var zeitAufElement = ende - anfang;

    alert("Sie waren " + zeitAufElement + " Sekunden auf dem Element.");

    document.forms['Zeit'].elements['Eingabe'].value = zeitAufElement
    }

    Zeit in Sekunden: <input type="text" name="Eingabe" readonly>

    Wobei ich nicht sicher bin, ob du ein readonly Element neu beschreiben kannst.

    Struppi.

  5. Danke für eure schnelle Hilfe!