Logo

Eigene Homepage

Überblenden von Bildern


"So viele Bilder, wer soll sich das alles ansehen"

Soll ist der falsche Ausdruck. Darf oder kann ist besser. Dies alles ist ja nur ein Angebot. Also hier die Überblendung von Bildern - automatisch und an derselben Stelle:


Smiley

Wie geht das ? Zuerst brauchst Du eine Javascript-Datei, die Du im entsprechenden Verzeichnis speicherst. In diesem Fall heißt sie "fader-framework.js" und Du kannst sie hier runterladen und speichern. Dazu gehört eine kleine CSS-Datei "fader-framework.css":

.fader { position: relative; display: inline-block; } .fader img { vertical-align: top; } .fader img.next { position: absolute; top: 0; left: 0; }

Markiere diese Zeilen, füge sie in eine neue Datei ein und speichere sie ebenfalls im demselben Verzeichnis mit dem Namen "fader-framework.css" ab.

Dann brauchst Du natürlich eine Anzahl Bilder, die Du auf diese Weise zeigen willst. Sie müssen alle die gleiche und die richtige Größe haben. Wenn eins von den Bildern auch nur 1 Pixel daneben liegt, dann springt der nachfolgende Inhalt.

Überlege Dir die Überblendzeit und die Zeit, die jedes Bild stehen soll. Diese Werte kannst Du im Kopf der neuen Javascript-Datei verändern. Dort stehen die Zeiten in Millisekunden. Die Werte sind ordentlich kommentiert, experimentiere gleich mal damit rum.


Es fehlt noch die Deklaration der Javascript-Datei im Kopf der eigentlichen HTML-Seite:

<script type="text/javascript" src="fader-framework.js"></script> <script type="text/javascript"> FaderFramework.init({ id: "fader1", images: [ "Bilder/Dia-1.jpg", "Bilder/Dia-2.jpg", "Bilder/Dia-3.jpg", "Bilder/Dia-4.jpg", "Bilder/Dia-5.jpg" ] }); </script>

Markieren, kopieren und einfügen in den Kopf (also vor /head) Deiner Datei. Dann die Bildernamen und das Verzeichnis der Bilder anpassen an Deine Verhältnisse. Die CSS-Datei, die dazu gehört, wird von der Javascript-Datei gefunden, darum brauchst Du Dich nicht zu kümmern. Beachte bitte, dass nach jedem Bild ein "Komma" stehen muss, aber beim letzten Bild nicht!

Überhaupt gilt: Jedes Zeichen ist wichtig, wenn etwas nicht funktioniert, dann fehlt irgendwo ein Anführungszeichen, ein Komma steht an der falschen Stelle, eine eckige Klammer ist ein normale usw.


Jetzt fehlt noch der Aufruf an der passenden Stelle. Dort fügst Du den folgenden Quellcode ein, als wenn Du ein Bild einfügst. Du kannst den ersten Test, ob es vom Ort und Platz passt, zuerst wirklich einfach eins von den Bildern einfügen (ohne den Fader).

<img src="bilder/DeinerstesBild.jpg" alt="Smiley" id="fader1">

Quelle: https://aktuell.de.selfhtml.org


Zurück zur Bildershow<------> Weiter zum selbstverändernden Design