Hallo Leute !
@Ruffnex, Dein Einwand, man könnte mit CSS einiges an Code sparen, hat mich nicht mehr losgelassen. Früher hatte ich in DHTML programmiert, und in Javascript auch animiert. Die Unterschiede der Browser und die mangelnde Kompatiblität der Browser untereinander haben mich damals wieder abgebracht.
Jetzt, mit CSS2 ein ausgereifter Standard, habe ich mir mal die Seite css4you.de zu Gemüte geführt. Sie ist teilweise anschaulicher und übersichtlicher als das SelfHTML, was ich bisher verwendete. Mit neuem Eifer versuchte ich ein Rollover-Effekt, wie ich ihn in der Homepage (www.svenspages.de) bereits mit Javascript realisiert habe, mit CSS-Mitteln zu machen; also ein statisches Bild, was beim Drüberfahren zu einem animierten Bild wechselt. Herausgekommen ist folgender Test:
http://www.svenspages.de/test/css-knopf-test.php
wieder einmal bin ich damit zwischen die Browser-Fronten geraten. Also im Grunde sind es 2 Links mit jeweils unterschiedlichen 2 Bildern. Wenn man mit der Maus drüberfährt, soll das jeweils animierte 2. Bild eingeblendet werden.
Um die Performance zu testen, habe ich die zwei Links mehrfach über Tabellen als Schachbrettmuster angeordnet. die DIV-Tags enthalten die A-tags (links). die A-tags sind leer, erhalten aber über CSS eine Breite und eine Höhe. den DIVS werden die IDs zugewiesen. Die ID legt das Aussehen fest.
Unter Opera gehts. Alle Links werden mit dem nicht animierten Bild geladen und das animierte Rollover-Bild wird korrekt angezeigt und animiert.
Unter Firefox zeigt er die Bilder auch. Nur das animieren der Rollover funktioniert nur einmal. Beim nächsten drüberfahren wird nur das letzte Frame der animierten GIF angezeigt (in der GIF ist eingestellt, dass sie beim letzten Frame anhält). Opera startet die GIF jedesmal neu wenn sie angezeigt wird. Stört aber nicht weiter.
Bei Internet Explorer der macht nun was ganz anderes. Die Links werden nicht angezeigt, wohl weil sie physisch keinen Inhalt aufweisen. Selbst mit einem Leerzeichen dazwischen wird der Link nicht angezeigt. Das Bild erscheint nur da wo der Text ist. Bei dem obersten linken Kästchen habe ich eine Platzhalter-GIF eingebaut. Die Grafik ist transparent und 90x90 gross.
Gibt es eine nicht zu unübersichtliche Möglichkeit, dass ein Rollover zumindest bei allen drei Browsern korrekt angezeigt wird ? Dabei ist mir in erster Linie nicht wichtig, ob die Animation auch jedesmal neu gestartet wird - wäre aber schön.
CU Elvereth
Ruffnex
