Mit einem Karussell können auf einer Website mehrere Themen prominent präsentiert werden. Eigentlich ist Flash für diese Art der Präsentation wie geschaffen, aber auch mit Javascript lässt sich dieser Effekt nachahmen.
Mit Flash können Websites zwar optisch aufgepeppt werden, aber nicht auf jedem Rechner ist der erforderliche Player installiert. Besitzer einer 64-Bit-Linux-Distribution oder User, die keine Animationen auf ihren Webseiten dulden, müssen eben ohne Flash auskommen. Als Alternative wird in diesem Artikel gezeigt, wie ein vielseitiges Karussell (ähnlich dem auf der Startseite von CNET.de[1]) mit Javascript statt mit Flash funktioniert.
Javascript - das kleinere Übel
Zum Zwecke dieses Artikels soll nicht die Grundsatzfrage diskutiert werden, warum man überhaupt ein Karussell programmieren möchte. Der Wunsch wird einfach als gegeben vorausgesetzt.
Die nächste Frage stellt sich sogleich: Warum Javascript und nicht Flash? Dafür sprechen mehrere Gründe:
- Die Implementierung ist kompakter als bei Flash. Durch Optimierung des Codes kann man ein funktionsfähiges Karussell mit nur wenigen Kilobytes erstellen. Das Laden der Bilder dauert länger als das Laden des HTML- und Javascript-Codes.
- Auch die Wartbarkeit ist ein Aspekt. Viele Entwickler sind mit Javascript vertraut, aber nicht so viele mit Flash. Vielleicht gibt es auch keinen Designer für eine ausgewachsene Flash-Implementierung, so dass die Entwickler einspringen müssen, wodurch Javascript zu einer sinnvollen Alternative wird.
- Es ist wesentlich einfacher, jemandem sinnvollen Content zu bieten, der Javascript deaktiviert hat, als jemandem ohne Flash.
- Es ist für Bildschirmlesegeräte einfacher, mit einem Karussell zurechtzukommen, das direkt im Code eingebettet ist, statt in einem externen Flash-Objekt.
- Wenn der Content in die Seite eingebaut ist, kann Google diesen auch indexieren. Wenn er in Flash eingebunden ist, kann der Googlebot den Links nicht folgen, ohne den Karussell-Content auf der Seite zu verbergen.
Einen Design-Wettbewerb gewinnt man damit noch nicht. Daher sollen die <div>-Elemente etwas ansprechender gestaltet werden, sodass sie wie die gängigen Karussells aussehen:
Das sieht schon besser aus, wird aber kaum richtig rotieren, wenn alle Elemente untereinander angeordnet sind. Um dafür zu sorgen, dass alle <div>-Elemente übereinander liegen, fügt man der Klasse storydiv den folgenden Eintrag hinzu:
position:absolute;
Das führt zu einem großen Durcheinander. Um etwas Ordnung in das Ganze zu bringen, versteckt man einfach die <div>-Elemente mit den IDs story2 bis story4 mithilfe von
display:none
In den Body-Tag ist Folgendes einzutragen:
<body onload="autorot()">
Wenn die Seite geladen wird, ruft sie die Funktion autorot auf, die wiederum die Funktion showNext aufruft und dann einen Timeout setzt, der sich selbst nach 3,5 Sekunden erneut aufruft. Auf diese Weise bleibt das Karussell in Bewegung.
Die Methode showNext legt nur fest, welche Story angezeigt werden soll, und übergibt diese an die Funktion rotateDiv, wo die eigentliche Action stattfindet. rotateDiv sucht alle <div>-Elemente, die Kinder des storyContainer->div< sind, und setzt ihre style.display-Variable auf "none", sofern es sich nicht um die anzuzeigende Story handelt. In diesem Fall wird der Wert auf "block" gesetzt.
Damit hat man ein funktionierendes Karussell, das aber weder besonders schön noch benutzerfreundlich ist. Das soll nun geändert werden. Ein Karussell bietet eine schnelle Möglichkeit, viele unterschiedliche Inhalte zu präsentieren, wobei man normalerweise einen Kompromiss eingehen muss zwischen der Rotationsgeschwindigkeit und der Möglichkeit, nicht nur die Überschrift, sondern den ganzen Text lesen zu können. Also braucht man Links zur Navigation.
Zur Optimierung fügt man ein <div>-Element für die Navigationslinks hinzu, mit denen man jede der vier Storys direkt aufrufen kann. Außerdem gibt es Vor- und Zurück-Links, mit denen man die Anzeige des Karussells steuern kann.
Hier der HTML-Code für die Navigation, der vor dem schließenden <body>-Tag eingefügt wird.
Damit das Karussell funktioniert und einer Flash-Variante ähnelt, benötigt man noch weitere Javascript-Funktionen:
Alles nichts Besonderes, aber notwendig. Nun muss auch die Funktion rotateDiv geändert werden, damit sie weiß, welche Story gerade angezeigt wird. Hier der entsprechende Code:
Außerdem gibt es einige neue Styles, die dem Stylesheet hinzugefügt werden müssen:
Damit sind alle Funktionen für das einfache Karussell vorhanden. Den vollständigen Code bis zu diesem Stadium kann man sich hier anzeigen[12] lassen.
Mit etwas Mühe und Einfallsreichtum lässt sich sicher ein noch viel besseres Karussell erstellen. Dieses Beispiel soll nur zeigen, was mit relativ wenig Aufwand möglich ist, und einen Anreiz geben, der eigenen Kreativität freien Lauf zu lassen.
Es ist nicht nur wichtig zu wissen, wann man Javascript einsetzen, sondern auch, wann man besser darauf verzichten sollte. Je aufwendiger die Animation werden soll, desto weniger sinnvoll ist der Einsatz von Javascript.
In keiner Weise kann es Javascript mit Flash aufnehmen, wenn es um den letzten Schrei an Effekten geht, die ins Auge fallen sollen. Hier ist der erforderliche Aufwand für einen identischen Effekt wesentlich größer als die Nachteile, die Flash mit sich bringt.
Falls man unbedingt Video einsetzen will, ist flv eines der besten Formate für das Internet. Nicht umsonst verwenden Youtube und Google Video einen Flash-Player.
Und sobald komplexere Dinge mit Javascript angestellt werden sollen, kommen die vielfältigen Inkompatibilitäten der einzelnen Browser zum Tragen. Die beste Lösung ist hier eine Standardisierung der Plattform, und genau für eine solche Umgebung ist Flash ideal geeignet.
Fazit
Damit ist dieses Projekt erfolgreich abgeschlossen. Eines sollte man dabei allerdings bedenken: Wer Flash um jeden Preis ersetzen will, ist auch nicht viel besser als die Leute, die Flash bei jeder Gelegenheit einsetzen. Falls es nur um eine einfache Rotation geht, dann reicht auch Javascript aus. Aber wenn komplexere Animationen und vielfältige optische Effekte benötigt werden, dann ist Flash die richtige Wahl. Man sollte immer daran denken, für jede Aufgabe das geeignete Werkzeug zu wählen.
URLs in diesem Artikel:
[1] = http:/
[2] = http:/
[3] = http:/
[4] = http:/
[5] = http:/
[6] = http:/
[7] = javascript:showStoryOne()
[8] = javascript:showStoryTwo()
[9] = javascript:showStoryThree()
[10] = javascript:showStoryFour()
[11] = javascript:showNext()
[12] = http:/