Forum Doku Wiki Blog

Forumsarchiv 2005, November
annimierter hintergrund mit css in firefox

archivierte Beiträge lesen

  1. (CSS) annimierter hintergrund mit css in firefox von arndt, 02. 11. 2005, 11:46

annimierter hintergrund mit css in firefox

Der folgende Beitrag wurde am 02. 11. 2005, 11:46 Uhr von arndt veröffentlicht.

Hallo Leute,
bin neu hier und finde die Infos klasse, die man hier rausziehen kann. Nur hab ich nichts finden können, was bei meinem Problemchen hilft...

Ich möchte auf meiner HP einige Links per CSS mit einem Hintergrundbild ausstatten. Dieses soll angezeigt werden, wenn der Cursor drüber liegt, also a:hover. Soweit kein Problem und funzt auch in allen Browsern.

Das Problem liegt darin, daß es sich um ein annimiertes GIF handelt, bei dem die Annimation nur einen Durchlauf hat, d.h. die Annimation läuft von frame_1 bis frame_10 und bleibt stehen, fängt nicht wieder von vorn an, solange das Bild angezeigt wird. Das gif ist korrekt und läuft auch in den verschiedenen Browsern. Habs in Opera und Firefox probiert.

Im IE sieht es so aus, daß die Annimation jedesmal läuft, wenn ich über einen Link fahre. In Firefox und Opera wird das Bild aber nur beim allerersten mal korrekt angezeigt, danach nur noch der letzte Frame, egal über welchem link ich mich befinde. Somit wird die Annimation in diesen browsern nicht neu gestartet, auch wenn das Bild neu angezeigt wird.

Irgend eine Idee eines workaround ?

Würde mich über Antworten freuen...

Gruß, Arndt

 a:hover.button {display:block;...
  background-image:url(bg_button.gif); background-repeat:no-repeat;}
 a:link.button {display:block;...}
 a:visited.button {display:block;...}
 a:active.button {display:block;...}

Animiertes Hintergrund-Gif bei a:hover nur einmal animiert

Der folgende Beitrag wurde am 02. 11. 2005, 13:45 Uhr von Zeromancer veröffentlicht.

Hallo arndt,

> Das Problem liegt darin, daß es sich um ein annimiertes GIF handelt, bei dem die Annimation nur einen Durchlauf hat, d.h. die Annimation läuft von frame_1 bis frame_10 und bleibt stehen, fängt nicht wieder von vorn an, solange das Bild angezeigt wird. Das gif ist korrekt und läuft auch in den verschiedenen Browsern. Habs in Opera und Firefox probiert.

ich könnte mir zwei Fehlerquellen vorstellen:

1. Die Grafik kommt aus dem Cache und wird nicht neu geladen -> kein abspielen von Anfang an

2. In einigen Browsern gibt es die Möglichkeit animierte Gifs zu manipulieren, d.h., man kann steuern, ob sie in Endlos-Schleifen laufen sollen oder nicht.

BTW, ich kenne die Grafik jetzt nicht, würde mich aber im Zweifelsfalle fragen, ob es nötig ist, mit Animationen zu arbeiten. Manch einer empfindet es als unnötig.

Mit freundlichen Grüßen,
André

Animiertes Hintergrund-Gif bei a:hover nur einmal animiert

Der folgende Beitrag wurde am 02. 11. 2005, 14:24 Uhr von arndt veröffentlicht.

Hmmm...

> 1. Die Grafik kommt aus dem Cache und wird nicht neu geladen -> kein abspielen von Anfang an

also, davon gehe ich mal aus. Beim IE wird sie auch aus dem Cache kommen, aber sie wird trotzdem bei jedem neuen anzeigen auch abgespielt... eben halt von vorn, so wie man es erwarten würde.

> 2. In einigen Browsern gibt es die Möglichkeit animierte Gifs zu manipulieren, d.h., man kann steuern, ob sie in Endlos-Schleifen laufen sollen oder nicht.

geht das dann via Script oder was auch immer ?

> BTW, ich kenne die Grafik jetzt nicht, würde mich aber im Zweifelsfalle fragen, ob es nötig ist, mit Animationen zu arbeiten. Manch einer empfindet es als unnötig.

hier mal der Link zu meiner Seite : www.behind-the-scene.de
Mag sein, daß es viele für unnötig halten, aber ich finds schick und es ist ja auch relativ dezent...

Erstmal vielen Dank für Deine Antwort.

Gruß, Arndt

Animiertes Hintergrund-Gif bei a:hover nur einmal animiert

Der folgende Beitrag wurde am 02. 11. 2005, 14:43 Uhr von Jens Holzkämper veröffentlicht.

Tach,

> also, davon gehe ich mal aus. Beim IE wird sie auch aus dem Cache kommen, aber sie wird trotzdem bei jedem neuen anzeigen auch abgespielt... eben halt von vorn, so wie man es erwarten würde.

das ist Ansichtssache, die Grafik sagt schließlich, sie möchte einmal animiert werden. Genau das tut Firefox, man könnte jetzt argumentieren, der IE hält sich nicht an die Vorgabe der Grafik. Firefox zeigt die selbe Grafik an, der Internet Explorer die gleiche; das ist unschön aber in meinen Augen beides nicht falsch.

mfg
Woodfighter

Animiertes Hintergrund-Gif bei a:hover nur einmal animiert

Der folgende Beitrag wurde am 02. 11. 2005, 14:56 Uhr von arndt veröffentlicht.

> > also, davon gehe ich mal aus. Beim IE wird sie auch aus dem Cache kommen, aber sie wird trotzdem bei jedem neuen anzeigen auch abgespielt... eben halt von vorn, so wie man es erwarten würde.

> das ist Ansichtssache, die Grafik sagt schließlich, sie möchte einmal animiert werden. Genau das tut Firefox, man könnte jetzt argumentieren, der IE hält sich nicht an die Vorgabe der Grafik. Firefox zeigt die selbe Grafik an, der Internet Explorer die gleiche; das ist unschön aber in meinen Augen beides nicht falsch.

naja, schön und gut, aber ich finde schon, daß es darauf ankommt, ob die Grafik immer noch oder erneut angezeigt wird. Bei erneuter Anzeige muß die Grafik auch vollständig angezeigt werden.

Aber egal... besteht die Möglichkeit, die Browser dazu zu zwingen, die Grafik vielleicht nicht aus dem Cache zu holen ?

Arndt

Animiertes Hintergrund-Gif bei a:hover nur einmal animiert

Der folgende Beitrag wurde am 02. 11. 2005, 15:16 Uhr von Jens Holzkämper veröffentlicht.

Tach,

> naja, schön und gut, aber ich finde schon, daß es darauf ankommt, ob die Grafik immer noch oder erneut angezeigt wird. Bei erneuter Anzeige muß die Grafik auch vollständig angezeigt werden.

wie gesagt, das ist eine Interpretationsfrage, weil ja eigentlich die selbe Grafik wieder angezeigt wird, und deren Animationszyklus ist halt abgelaufen.

> Aber egal... besteht die Möglichkeit, die Browser dazu zu zwingen, die Grafik vielleicht nicht aus dem Cache zu holen ?

Nein, du kannst einen Browser zu gar nichts zwingen, du kannst nur per HTTP-Header eine passende Empfehlung mitschicken, die Datei nicht zu cachen, ich bin mir jedoch recht sicher, das das nicht helfen wird. Eine aus dem Cache geholte Grafik würde nämlich als neues Objekt meiner Meinung nach auch animiert werden, hier wird einfach kein neues Objekt erzeugt, sondern das selbe Objekt mehrfach ein- und ausgeblendet.

mfg
Woodfighter

Animiertes Hintergrund-Gif bei a:hover nur einmal animiert

Der folgende Beitrag wurde am 02. 11. 2005, 15:42 Uhr von wahsaga veröffentlicht.

hi,

> Eine aus dem Cache geholte Grafik würde nämlich als neues Objekt meiner Meinung nach auch animiert werden, hier wird einfach kein neues Objekt erzeugt, sondern das selbe Objekt mehrfach ein- und ausgeblendet.

Und deshalb kann man an dieser Stelle besser ansetzen, auch wenn CSS (allein) nicht mehr reicht:

Wenn man sich mittels Javascript ein neues img-Element erstellt und ins Dokument einhängt, werden nach meiner Erfahrung auch nicht-wiederholende GIF-Animationen erneut abgespielt, egal ob die Grafik aus dem Cache kommt ("Funzte" in meinen Versuchen jedenfalls mit IE, FF und Opera).

Also könnte man auf onMouseover auf dem Link reagieren, und ihm ein dynamisch neu erzeugte img-Objekt als firstChild/lastChild/woauchimmer einhängen, welches dann über CSS derart positioniert wird, dass es wie ein Hintergrundbild wirkt.
onMouseout entfernt man dann dieses Bild einfach wieder aus dem Link.

gruß,
wahsaga


--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }

Animiertes Hintergrund-Gif bei a:hover nur einmal animiert

Der folgende Beitrag wurde am 02. 11. 2005, 16:13 Uhr von Jens Holzkämper veröffentlicht.

Tach,

> Also könnte man auf onMouseover auf dem Link reagieren, und ihm ein dynamisch neu erzeugte img-Objekt als firstChild/lastChild/woauchimmer einhängen, welches dann über CSS derart positioniert wird, dass es wie ein Hintergrundbild wirkt.
> onMouseout entfernt man dann dieses Bild einfach wieder aus dem Link.

und das alles für einen gehoverten Menü-Button.

mfg
Woodfighter

Animiertes Hintergrund-Gif bei a:hover nur einmal animiert

Der folgende Beitrag wurde am 02. 11. 2005, 18:44 Uhr von wahsaga veröffentlicht.

hi,

> und das alles für einen gehoverten Menü-Button.

Tja, wenn Seite schön sein soll, muss Seitenersteller arbeiten ...

Aber warum nicht - Javascript für ein optionales Gimmick, da spricht doch wenig dagegen.
Und für den Fall, dass JS nicht verfügbar ist, kann man ja hier per CSS auch leicht einen "Fallback" bereitstellen, in dem man dort einen weniger aufwendigen Hover-Effekt anbringt ...

gruß,
wahsaga


--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }

Animiertes Hintergrund-Gif bei a:hover nur einmal animiert

Der folgende Beitrag wurde am 02. 11. 2005, 22:36 Uhr von arndt veröffentlicht.

> > und das alles für einen gehoverten Menü-Button.
>
> Tja, wenn Seite schön sein soll, muss Seitenersteller arbeiten ...
>
> Aber warum nicht - Javascript für ein optionales Gimmick, da spricht doch wenig dagegen.
> Und für den Fall, dass JS nicht verfügbar ist, kann man ja hier per CSS auch leicht einen "Fallback" bereitstellen, in dem man dort einen weniger aufwendigen Hover-Effekt anbringt ...

"jaaa... wenns scheen macht"... ;)

okay, hab schon geahnt, daß es doch nur mit der JS-Methode klappt.
Werd mir mal überlegen, ob ichs dann noch brauche :(

Aber danke für die Tips.

Gruß, Arndt

Animiertes Hintergrund-Gif bei a:hover nur einmal animiert

Der folgende Beitrag wurde am 03. 11. 2005, 10:55 Uhr von Martin Hölter veröffentlicht.

Hi!

> und das alles für einen gehoverten Menü-Button.

Aber für einen wirklich schönen.

Gruß aus Iserlohn

Martin
--
Selfcode: ie:{ fl:( br:^ va:) ls:# fo:| rl:( n4:( ss:| de:> js:) ch:? sh:( mo:| zu:)

© 1998-2013 SELFHTMLImpressumSoftware: Classic Forum 3.4