Animierte Gifs zurückspulen oder cachen verhindern

[BobbY]

Hallo Forum-Gemeinde,

Für mich stellt sich mal wieder ein Problem in den Weg wo ich keine Lösung finde.

Ich habe eine Navigation mit 6 Menüpunkten. Über CSS lasse gebe ich den <a>-Tags bei rollover eine animierte Gif-Grafik als Hintergrund, die sich nur einmal wiederholt und nicht endlos ist.

Im Firefox , Netscape und IE 5.X bleibt nun aber die Grafik bei erneutem Rollover, egal über welchen Button, erscheint das Gif nicht als Animation sondern hängt am Endpunkt fest.

Gibt es eine Möglichkeit das Gif zurückzuspulen z.B. bei Mouseout o.ä.

Wäre super wenn Ihr da ne Lösung hättet.

Vielen Dank im Vorraus

Bobby

[wahsaga]

hi,

Ich habe eine Navigation mit 6 Menüpunkten. Über CSS lasse gebe ich den <a>-Tags bei rollover eine animierte Gif-Grafik als Hintergrund, die sich nur einmal wiederholt und nicht endlos ist.

Im Firefox , Netscape und IE 5.X bleibt nun aber die Grafik bei erneutem Rollover, egal über welchen Button, erscheint das Gif nicht als Animation sondern hängt am Endpunkt fest.

ja, opera verhält sich da m.E. besser - der spielt die animation jedes mal auf's neue ab, wenn ein bild erneut "sichtbar" gemacht wird.

Gibt es eine Möglichkeit das Gif zurückzuspulen z.B. bei Mouseout o.ä.

"zurückspulen" lassen sich gifs nicht.
bei einem ähnlichen problem habe ich diesen effekt dadurch umgangen, dass ich per javascript jedes mal ein neues img-objekt erzeugt und ins dokument eingehängt habe - da spielten IIRC alle browser die animation erneut ab; auch ohne die eigentliche grafikdatei neu zu laden.
müsstest du mal schauen, ob das für dich eine alternative zum CSS-rollover wäre, stattdessen "echte" bilder bzw. bildobjekte per javascript immer wieder neu zu erzeugen und einzuhängen.

gruß,
wahsaga

[Bobby]

Hi

bei einem ähnlichen problem habe ich diesen effekt dadurch umgangen, dass ich per javascript jedes mal ein neues img-objekt erzeugt und ins dokument eingehängt habe - da spielten IIRC alle browser die animation erneut ab; auch ohne die eigentliche grafikdatei neu zu laden.
müsstest du mal schauen, ob das für dich eine alternative zum CSS-rollover wäre, stattdessen "echte" bilder bzw. bildobjekte per javascript immer wieder neu zu erzeugen und einzuhängen.

Ich wollte eigentlich Javascript weitestgehend ignorieren und nicht in die Webseite einbauen. Außerdem ist die Geschwindigkeit der Rollovereffekte dann sehr Client-abhängig. Schade das es dfür keine Lösung gibt.

Grüße
Bobby

[wahsaga]

hi,

Ich wollte eigentlich Javascript weitestgehend ignorieren und nicht in die Webseite einbauen.

warum?
so ein rollover-effekt ist ein optinales optisches gimmick.

Außerdem ist die Geschwindigkeit der Rollovereffekte dann sehr Client-abhängig.

in wie fern?
welche probleme siehst du  bzgl. der geschwindigkeit?
ob du per CSS :hover ein hintergrundbild auswechselst, oder per javascript auf onmouseover/-out-events reagierst und ein bildobjekt dynamisch in die seite einfügst, macht m.E. keinen durch den betrachter feststellbaren zeitlichen unterschied.

gruß,
wahsaga

[Bobby]

hi

»»Außerdem ist die Geschwindigkeit der Rollovereffekte dann sehr Client-abhängig.

in wie fern?

Wenn Javascript-Unterstützung ausgeschaltet ist sieht man demzufolge keine Animation mehr.

welche probleme siehst du  bzgl. der geschwindigkeit?
ob du per CSS :hover ein hintergrundbild auswechselst, oder per javascript auf onmouseover/-out-events reagierst und ein bildobjekt dynamisch in die seite einfügst, macht m.E. keinen durch den betrachter feststellbaren zeitlichen unterschied.

CSS wird einmal beim Laden der Datei ausgeführt. Javascript jedesmal bei Rollover über die Schaltfläche. Netscape hat m.W. eine sehr schlechte Javascriptunterstützung. (unglaublich lahm)

Kannst mich auch gern eines besseren Belehren.

Grüße

Bobby

[wahsaga]

hi,

Wenn Javascript-Unterstützung ausgeschaltet ist sieht man demzufolge keine Animation mehr.

ach, echt ...?
und was hat das jetzt mit der "geschwindigkeit" zu tun?

das fällt unter punkt eins, optionales optisches gimmick.

CSS wird einmal beim Laden der Datei ausgeführt.

CSS wird überhaupt nicht ausgeführt.
der browser liest es ein, und erstellt sich dann ein "regel-set", was er worauf anzuwenden hat.

Javascript jedesmal bei Rollover über die Schaltfläche.

ein :hover in CSS ganz genauso.

Netscape hat m.W. eine sehr schlechte Javascriptunterstützung. (unglaublich lahm)

NS4? dessen CSS-unterstützung dürfte noch schlechter sein als die JS-unterstützung.
außerdem gilt im NS4 IIRC, wenn javascript deaktiviert, dann auch kein CSS.

gruß,
wahsaga

[Bobby]

hi

NS4? dessen CSS-unterstützung dürfte noch schlechter sein als die JS-unterstützung.
außerdem gilt im NS4 IIRC, wenn javascript deaktiviert, dann auch kein CSS.

Ich meinte nicht die 4er VErsion...

Auch die 7er ist nicht viel besser... naja ist ja egal... Javascript soll draußen bleiben und da gibt es dann wohl wirklich keine Lösung. Schade

Trotzdem Danke

Grüße.
Bobby

[Hopsel]

Hi,

ja, opera verhält sich da m.E. besser - der spielt die animation jedes mal auf's neue ab, wenn ein bild erneut "sichtbar" gemacht wird.

vielleicht hilft es ja, mit den beiden Eigenschaften visibility und display zu experimentieren. Einmal das "sichtbar" machen und einmal das "Einschieben" in den Inhalt.

MfG Hopsel

[Bobby]

Hi

vielleicht hilft es ja, mit den beiden Eigenschaften visibility und display zu experimentieren. Einmal das "sichtbar" machen und einmal das "Einschieben" in den Inhalt.

In Verbindung mit CSS??? Das Problem liegt doch eigentlich am Cachen. Nach einem reload der Seite ist auch wieder das animierte Gif sichtbar.

Ich denke damit werd ich nicht weiterkommen. Oder hattest du einen bestimmten Ansatz im Sinn?

Grüße
Bobby

[Hopsel]

Hi,

Ich denke damit werd ich nicht weiterkommen. Oder hattest du einen bestimmten Ansatz im Sinn?

ich habe es nicht ausprobiert, aber zwischen den beiden Eigenschaften display: none; und visibility: hidden; bestehen ja Unterschiede. Ich habe keine Ahnung, wie du den Rollovereffekt realisiert hast, deswegen ist eine weitere Analyse schwierig.

MfG Hopsel

[Bobby]

Hi,

ich habe es nicht ausprobiert, aber zwischen den beiden Eigenschaften display: none; und visibility: hidden; bestehen ja Unterschiede. Ich habe keine Ahnung, wie du den Rollovereffekt realisiert hast, deswegen ist eine weitere Analyse schwierig.

Ungefähr so:

CSS-Datei
a{
  display.block;
  background-image:url(image1.gif);
  width:100px;
  height:50px;
}

a:hover{
  background-image:url(animateimage.gif)
}

<a href="#">irgendeinlink</A>
<a href="#">irgendeinlink</A>

Ich weiß nun nicht wo du visible und hidden einsetzen möchtest.
Wie hattest du das gedacht?

Grüße
Bobby