Benjamin S.: Animationsprobleme

Hallo alle miteinander!

Ich versuche derzeit eine Page mit einem kleinem Script aufzupeppen. Im Prinzip handelt es sich dabei um ein Mouseover bzw. Mouseout.
Ich versuche also das beim Überfahren einer Grafik mit der Maus eine neue Grafik eingeblendet wird.
Das Problem dabei ist, es soll eine Animation sein. Aber wenn ich die Animation für den Mouseover-Befehl einsetze, zeigt er mir nicht eine startende Animation, sondern eine schon laufende (Zumindest mit dem Navigator).
Mein Begehr ist es allerdings, daß die Animation erst, und nur dann gestart werden soll, wenn sie über den Mouseover-Befehl eingesetzt wird.

Wie kann ich das bewerkstelligen? Könnt Ihr mir vielleicht helfen?

In sehnsüchtiger Erwartung, Benjamin ;-)

  1. Hi Benjamin!

    Ich versuche also das beim Überfahren einer Grafik mit der Maus eine neue Grafik eingeblendet wird.
    Das Problem dabei ist, es soll eine Animation sein. Aber wenn ich die Animation für den Mouseover-Befehl einsetze, zeigt er mir nicht eine startende Animation, sondern eine schon laufende (Zumindest mit dem Navigator).
    Mein Begehr ist es allerdings, daß die Animation erst, und nur dann gestart werden soll, wenn sie über den Mouseover-Befehl eingesetzt wird.

    Mein Vorschlag: Speichere alle Teilbilder des animated .gif einzeln ab - z.B. als ani_0.gif, ani_1.gif, ani_2.gif, ... und mach die Animation per JavaScript sozusagen "zu Fuß". Ich poste hier mal ein Scriptbeispiel, welches zumindest für IE4 und NN4.x zu funktionieren scheint und welches Du leicht an Dein Problem anpassen können müßtest. Die Probleme: Ich weiß nicht, wie sauber die Animation hinterher aussieht, außerdem muß JavaScript eingeschaltet sein. Zu beachten: In n_ani steht die Anzahl der Teilbilder. Für n_ani=4 werden z.B. die Bilder ani_0.gif, ..., ani_3.gif verwendet. Ferner muß beim Tag <img src="..." onMouseOver="einschalten(0)" ...> die Bildnummer des Bildes im Dokument übergeben werden, damit weiter oben document.images[bildnr] auf das richtige Bild verweist.

    Viele Grüße

    Andreas

    ------8><-----------

    <html><head><title>...</title>
    <script language="JavaScript">
    <!--

    var    n_ani    = 2,           // Anzahl der Teilbilder
             time_ms  = 50,          // Zeitintervall
             count    = 0,           // Aktuelle Teilbildnr
             enable   = 0;           // Flag zum Ein/Ausschalten des Bildlaufs

    // Bilder initialisieren

    var    i, bilder = new Array(n_ani);
      for(i=0; i<n_ani; ++i) {
         bilder[i] = new Image();
         bilder[i].src = "/icons/ani_"+i+".gif";
      }

    // Bildwechsel: Eins weiter

    function bild_weiter(bildnr) {
        // Weiterzaehlen
        
        count = (count+1)%n_ani;

    // Bild einsetzen

    document.images[bildnr].src = bilder[count].src;
        
        // Naechsten Timeout setzen
        
        if (enable) window.setTimeout("bild_weiter("+bildnr+")", time_ms);
      }

    function einschalten(bildname) {
         enable = 1;
         window.setTimeout('bild_weiter("'+bildname+'")', time_ms);
      }

    function ausschalten() {
        enable = 0;
      }

    //-->
    </script></head>
    <body>
      <a href="http://irgendwohin.com" onMouseOver='einschalten(0)' onMouseOut='ausschalten()' border=0>
      <img src="/icons/ani_0.gif">
      </a>
    </body></html>

    1. Hallo nochmal...

      function einschalten(bildname) {
           enable = 1;
           window.setTimeout('bild_weiter("'+bildname+'")', time_ms);
        }

      sorry... war falsch. Richtig muß es natürlich heißen

      function einschalten(bildnr) {
           enable = 1;
           window.setTimeout('bild_weiter("'+bildnr+'")', time_ms);
        }

      ...komischerweise hat's vorher auch schon funktioniert. Wahrscheinlich wurde der unbekannte "bildname" einfach als 0 interpretiert?! So, jetzt viel Vergnügen damit ;-))

      Viele Grüße

      Andreas

  2. Hallo,

    Das Problem dabei ist, es soll eine Animation sein. Aber wenn ich die Animation für den Mouseover-Befehl einsetze, zeigt er mir nicht eine startende Animation...

    Animierte GIF's haben ihre Tuecken.
    Guck mal hier:
    http://screenexa.net/js_notiz/tips/anim.htm
    Vielleicht hilft Dir das.

    Christine