Webgrafik Problem mit GIF-Animationen

Bugfix

Bugfix

kennt sich schon aus
Hallo!

Auf dieser Seite:
MyScience - Die private Internetseite von Marc Eickhoff //
gibt es das folgende Problem. In der Navigation rechts sehr ihr eine (bzw. zwei) GIF-Animationen als Hintergrund der Buttons. Eine Animation für das Einblenden der gelben Farbe und eine für das Ausblenden. Das funktioniert auch alles soweit wunderbar, allerdings ist das nicht mehr der Fall, wenn man eine der Unterseiten besucht, denn da fehlt die Animation für das Ausblenden der Farbe. Am besten seht ihr es euch selber an.
Gibt es eine Möglichkeit, den Effekt auf allen Unterseiten korrekt anzeigen zu lassen?

Die Buttons sind nach folgendem Muster erstellt worden:

Code: 
#button_menüpunkt{
	float: left;
	width: 180px;
	height: 30px;
	text-align: center;
	background-image: url(img/ausblenden.gif);
}

#button_menüpunkt:hover {
	background-image: url(img/einblenden.gif);
	text-decoration: none;
}
 
Zuletzt bearbeitet:
Nein, leider nicht. Aber ich vermute, dass es am Browser liegt. Firefox scheint die Grafiken nicht neu zu laden...
 
Das glaube ich nicht, da ich es einmal komplett ohne AddOns ausprobiert habe. Bei allen von meinen Freunden funktioniert das im Übrigen auch nicht...
 
Hab jetzt nicht nachgesehen, aber gibt's bei dem nicht auch eine Einstellung, die Animationsverhalten von Bildern steuert - sprich: Animation immer neu starten?

Ansonsten: In Opera funktioniert es wie gewollt, in Safari wird die Animation nur ein mal ausgeführt, beim ersten Hovern entsteht eine winzige Lücke ohne sichtbares Hintergrundbild, beim nächsten Hovern wird die Animation gar nicht mehr ausgeführt (auch auf der selben Seite), Chrome verhält sich genau so (wen wundert's, ist ja die selbe Engine wie beim Safari), im IE 7 und 8 zwar lahm und auch mit der Lücke, aber ansonsten richtig und in Lynx sehe ich nur [image] [image] [image] weil leider alle alt Attribute bei den Bildern fehlen und die Navigation ist gänzlich unbrauchbar, weil da nicht mal echte <img ...> vorhanden sind, sondern nur Hintergrundbilder ...
 
@Supi - liegt am Verhalten der Grafik, nicht an Firefox (hier gehts nämlich auch nicht).
Firefox stellt nur die letzte Grafik nach dem Durchlauf an. Geht man nämlich "Zurück",
tritt derselbe Effekt auch auf der Startseite auf, wo es doch zuerst funktionierte.
Logisch ist es auch nachvollziehbar - die Grafik ist durchgelaufen, fertig.
Es gibt im CSS dort auch keinen Befehl, der vom hover zurück das zurücksetzen täte.

Entweder CSS faden
http://www.cssplay.co.uk/opacity/fadein.html
Oder per Javascript - oder ganz verzichten - oder Flash.
 
Ich habe das mal jetzt mit Opera 10.01, IE 8 und FiFo 3.5 probiert. Es klappt bei allen, wobei alle 3 unterschiedlich damit umgehen:
IE 8: Klicke man einen Link an, hört der angeklickte auf zu leuchten, dafür leuchten kurz alle anderen auf und hinterher nur wieder der markierte
FiFo: Nach dem Anklicken leuchtet erstmal keiner mehr auf, bis man den Cursor wieder bewegt, dann leuchtet der markiert Link wieder korrekt
Opera: Es leuchten nach dem Anklicken alle kurz auf, dann keiner bis der Cursor bewegt wird, wie beim FiFo.

Dass die standard-Browser auch immer alles anderes machen müssen als die anderen...
 
Hast Du genau hingesehen, ob der Fx3.5 auch beim hovermäßigen verlassen des Links ein klein wenig nachleuchtet? Meiner tut's nämlich genau so wenig wie der von Bugfix.

Die Spec schweigt sich leider darüber aus, ob eine Hintergrundanimation neu geladen bzw. gestartet werden muss, wenn sie geändert wird. Ich persönlich würde ja sagen, da das Bild ja ausgetauscht wird - andere nein, weil es ja noch das selbe aus dem Cache ist - wobei IMHO ein Cache verfälscht. Wenn man ihn ausschaltet, hat man das Verhalten, wie es meiner Meinung nach eigentlich sein sollte:

Beim Hovern wird der Hintergrund nachgeladen und somit neu gestartet - ein Cache sollte sich da so verhalten, als wenn es vom Webserver direkt käme.

Das ist übrigens auch der Grund für die klitzekleine Darstellungslücke beim IE und bei Safari/Chrome. Alles eine Frage der Cache Strategie...

BTW: Das erste aufleuchten beim Aufbau einer der Seiten muss eigentlich so sein - jeder Browser, der es nicht macht, macht etwas falsch.
 
Nein, das ist mein überlegener Browser - der Fx hat's bei mir auch nicht gemacht :p SCNR

Hab sogar einen Screenshot davon hinbekommen, als ich mal mit dem Mauszeiger drüber geflitscht bin...
 

Anhänge

  • hovereffekt.jpg
    hovereffekt.jpg
    61,6 KB · Aufrufe: 284
Das ist eigentlich normal.
Die Grafik wir beim ersten Seitenaufruf geladen und gut ist. Danach ist die Grafik im Cache und wird nicht nochmal geladen. Also ist diese Verhalten korrekt.
Wenn du diesen Effekt bei jedem weiteren Aufruf erzielen willst, musst du die Grafiken auch jedes mal neu laden lassen.
 
HeikeFy schrieb:
Also ist diese Verhalten korrekt.
Zum Vergrößern anklicken....
Falsch, da die Grafik aus dem Browser-Cache in den Browser geladen wird, genau so wie sie von der Webseite geladen würde. Da haben halt ein paar Entwickler wieder ein paar Mikrosekunden schinden wollen und das ging in die Hose. Ich nenne so etwas Bug.
 
Firefox lädt die Grafik korrekt aus dem Cache und die Animation ist dabei abgelaufen.
Der Knackpunkt bleibt beim CSS hängen, das wird schon richtig interpretiert.

Aber wenn schon "falsch", dann aber richtig daneben ;) (Engine: IE6)
IE6 ist zwar ausreichend rückständig, trotzdem sollte man sowas noch beachten.
 

Anhänge

  • my-science.png
    my-science.png
    85 KB · Aufrufe: 169
Bugfix schrieb:
Und wie soll ich das anstellen? :(
Zum Vergrößern anklicken....
z.B. so:
JavaScript fade menu
Aber achte darauf, dass es von der Farbigkeit hinkommt, wenn die Animation nicht funktioniert, sprich: Wenn JS an ist, hat man den netten Effekt, wenn JS aus ist muss es aber dennoch funktionieren.

@Brummelchen:
Öffne einfach mal eine der Ein- oder Ausblend-Dateien aus dem Browser-Cache mit einer anderen Anwendung, die animierte GIFs darstellen kann. Wenn die dann auch abgelaufen ist, hast Du Recht - ansonsten sind die Browser, die sie nicht neu starten, einfach zu blöd, das Animations Bit korrekt auszuwerten bzw. zurück zu setzen. Der selbe Hintergrund soll ja jedes mal lt. CSS Anweisung ausgetauscht werden.

Die Datei selbst kann nicht abgelaufen sein, außer sie ist mit einem Verfalldatum versehen - dann ansonsten dürfte es auch mit JS nicht funktionieren, was es aber tut - obwohl er auch dabei die Datei aus dem Cache ausliest.

Ein Bug bleibt ein Bug, da hilft auch kein schön reden. Dass man evtl. als Webseiten Ersteller darum herum arbeiten muss (oder ihn einfach ignorieren kann) steht ja auf einem anderen Blatt.

PS: So nette Ideen Stu Nicholls auch ansonsten zum Thema CSS hat - das Fade in/ Fade out Beispiel ist totaler semantischer Blödsinn und widerspricht absolut dem Gedanken der Trennung von Inhalt und Layout. Ein völlig normaler Hover Effekt und ein paar Zeilen JS für eine zusätzliche Einblendfunktion wären da deutlich besser und kürzer gewesen.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Oben