Anleitung: Ein Karussell mit Javascript entwickeln

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) 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.

Fanden Sie diesen Artikel nützlich?
6 von 7 Lesern fanden diesen Artikel nützlich.

Aktuelle Job-Angebote

ZDNet.de Live

wow! ...

wow! ein wirklich schickes Android, das nicht Tablet-Größe hat: t.co/... ... leider nur mäßige technische Daten.

10.02.12, 21:25 von coke4all
Googl ...

Google arbeitet angeblich an Home Entertainment System mit Cloudanbindung t.co/...

10.02.12, 21:10 von zdnet_de
Why ...

Why are young Japanese men losing interest in sex? t.co/...

10.02.12, 20:55 von ZDNet
What ...

What AMD's new roadmap means for users t.co/...

10.02.12, 20:40 von ZDNet
Manch ...

Manchester City is expanding its online reach to Japan t.co/...

10.02.12, 20:35 von ZDNet
Fours ...

Foursquare evolving into one-stop shop with NFC support t.co/...

10.02.12, 20:35 von ZDNet
Websi ...

Website der Gelben Seiten baut Bewertungsfunktionen aus t.co/...

10.02.12, 20:30 von zdnet_de
Motor ...

Motorola: Android-Updates verzögern sich wegen der Hardware-Vielfalt t.co/...

10.02.12, 20:00 von zdnet_de
Aktie ...

Aktienkurse dort wo man sie am liebsten sieht: auf dem Mülleimer! t.co/...

10.02.12, 19:50 von coke4all
Faceb ...

Facebook details Zuckerberg's $500,000 salary, 45% bonus t.co/...

10.02.12, 19:45 von ZDNet
New ...

New Microsoft Office University product comes with tougher verification rules t.co/...

10.02.12, 19:35 von ZDNet
#Prad ...

#Prada Phone by #LG 3.0 ausgepackt und ausprobiert - #smartphone #android t.co/...

10.02.12, 19:30 von cnet_de
Schon ...

Schon im Test: Prada Phone by LG 3.0 mit Android und superhellem Display t.co/...

10.02.12, 19:30 von cnet_de
Beta ...

Beta von Chrome 18 erweitert Hardwarebeschleunigung t.co/...

10.02.12, 19:30 von zdnet_de
Sage ...

Sage helps chocolate business manage seasonality t.co/...

10.02.12, 19:20 von ZDNet
Colum ...

Columbia University excludes Google Docs t.co/...

10.02.12, 19:20 von ZDNet
Benq ...

Benq bringt XGA-Projektor mit 4000 ANSI-Lumen t.co/...

10.02.12, 19:00 von zdnet_de
Germa ...

Germany postpones ACTA signing in wake of protests t.co/...

10.02.12, 18:45 von ZDNet
Iran ...

Iran cuts off access to popular Web sites t.co/...

10.02.12, 18:40 von ZDNet