HTML 5 + Hamburger SV Aufmacher

[BlockBuster]

Hallo liebe Leute,

habe eine Frage an die HTML5 + CSS3 Experten.

Folgendes aufmacher Bild von der Webseite www.hsv.de würde ich gerne mittels HTML 5 realisieren.
Meine Frage, ist es möglich?
Wenn ja, wie würde ich beginnen?

Auf der HSV Seite wird es noch mittels Flash gelöst, will jedoch davon wegkommen.
Bin für jede Hilfestellung und Tutorial sehr dankbar.

lg
BB

[wdominik]

Ist auf jeden Fall lösbar, auch ohne große Zauberrei.

Erster Schritt wäre das Nachbilden des Flash-Elements mit einfachem HTML. Sollte recht simpel sein.

Danach braucht es etwas JavaScript. Um reinzukommen würde ich erstmal nur die Basisfunktionalität einbauen. Also wenn man mit der Maus über ein Bild fährt, dass es im großen Feld angezeigt wird und die automatische Rotation nach einigen Sekunden – Zunächst ohne die Animationen. Auch das sollte man recht schnell hinbekommen.

Hinweise: Großem Bild eindeutige ID geben, kleinen Bildern ein Ereignis "mouseover" zuweisen, und sobald dieses aufgerufen wird "src" das großen Bildes ändern.

Als nächstes die Effekte. Hier kannst Du dich für CSS3 entscheiden, dann funktioniert Deine Lösung allerdings nur, wenn der Browser auch CSS3 unterstützt. Alte Browser sehen dann nur die einfache Variante, ohne visuelle Effekte. Alternativ gibt es Möglichkeiten (jQuery, Mootools, etc.) welche Du verwenden kannst, um Effekte auch für ältere Browser zu ermöglichen – für neue Browser bedeutet das allerdings mehr unnötigen Ballast.

Hoffe das hat Dir etwas geholfen, wenn Du irgendwo hängst sag ruhig bescheid.

lg

[BlockBuster]

vielen lieben Dank für deine Antwort. Werd mich da mal drüber wagen, sollt ich mich nicht auskennen, werde ich auf dein Angebot zurückkommen

lg