Animationsprobleme
Benjamin S.
- javascript
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 ;-)
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>
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
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