Frage zum Wiki-Artikel „Bildwechsler“
bearbeitet von Matthias ScharwiesHerzlich 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](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Einstieg)
* [CSS/Tutorials/Einstieg](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg)
Andererseits will man ja auch gleich praktische Erfolge erzielen. Speicher dir den Bildwechsler ([Beispiel:Bildwechsler-3.html](https://wiki.selfhtml.org/extensions/Selfhtml/example.php/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 verändern.
- 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](https://wiki.selfhtml.org/wiki/CSS/Custom_properties_\(CSS-Variablen\)) 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](https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Web_Animations/Komfort-Bildwechsler)
Herzliche Grüße und frohe Weihnachten!
Matthias Scharwies
--
Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“