nicht angemeldet
annimierter hintergrund mit css in firefox
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;...}
-
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é-
Hmmm...
- 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.
- 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
-
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-
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
-
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-
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; }-
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-
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; }-
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
-
-
Hi!
und das alles für einen gehoverten Menü-Button.
Aber für einen wirklich schönen.
Gruß aus Iserlohn
Martin
-
-
-
-
-
-