Frage zum Wiki-Artikel „Bildwechsler“

[Matthias Scharwies]

Herzlich willkommen bei SELFHTML!

ich bin gerade am programmieren meiner neuen website (mit Adobe Dreamweaver).

Ich habe vor 15 Jahren mal einen Grundkurs mit Dreamweaver gemacht.

So habe ich auch angefangen.

Ich möchte einen Bildwechsler einbauen, mit 10 svg-Bilder, mit der Zoom-Funktion, so wie es hier im Forum beschrieben wird.

Kann mir jemand helfen oder das machen?

Ja, helfen!

Evtl. willst du über die Feiertage mal die Grundlagen lesen:

• HTML/Tutorials/Einstieg
• CSS/Tutorials/Einstieg

Andererseits will man ja auch gleich praktische Erfolge erzielen. Speicher dir den Bildwechsler (Beispiel:Bildwechsler-3.html) mal lokal ab und versuche die Datei zu verändern:

• anderer header, anderes Layout.
• Du kannst ja schon mal die Bilder durch deine SVGs ersetzen.
  • die Regelsätze mit -webkit- habe ich entfernt - die braucht man nicht mehr
  • Wenn Du mehr als 3 Bilder einfügen willst, musst du die keyframes und die Zeiten ebenfalls anpassen.
  • Heute würde man für so etwas CSS custom properties nehmen.

Die Warnung zum Beispiel hast du gesehn?

Beachten Sie: Die Bilder werden im HTML-Code doppelt angezeigt, damit nach dem Durchlaufen der Animation kein weißer Hintergrund zu sehen ist. So ist diese CSS-Animation eher ein proof of concept als eine best practice; trotzdem aber eine Alternative zu einer JavaScript-basierten Diashow.

Evtl. wäre eine JavaScript-Lösung besser und benutzerfreundlicher:

• JavaScript/Tutorials/Web_Animations/Komfort-Bildwechsler

Herzliche Grüße und frohe Weihnachten!

Matthias Scharwies