Bildwechsel 4
Verfasst: So 7. Jan 2024, 01:02
Kopieren Sie diesen Code und platzieren Sie ihn im HEAD-Bereich Ihrer Seite:
Kopieren Sie diesen Code und platzieren Sie ihn im BODY-Bereich Ihrer Seite:
Laden Sie imageswap.js und imageswap.css herunter und legen Sie diese Dateien im selben Ordner ab.
Speichern Sie das Bild „bullet.png“, wenn Sie Navigationskreise verwenden wollen, und platzieren Sie sie im selben Ordner.
KOMMENTARE:
1. Navigationskreise: werden automatisch vom Skript erstellt.
Im CSS-Klassenselektor .navigatierondjes können Sie Platzierung und Stil anpassen.
Wenn Sie keine Navigationskreise wünschen, blenden Sie diese mit div.navigation Circles {display:none;} aus.
2. Übergangseffekte: Diese können Sie in den Optionen (Effekt) in imagechange6.js festlegen.
1-8 = Streifen: 1=oben links, 2=oben rechts, 3=unten links, 4=unten rechts, 5=oben+unten links, 6=oben+unten rechts, 7=links falten, 8=rechts falten
9-12 = einschieben: 9=links, 10=rechts, 11=oben, 12=unten
13 = verblassen
14-17 = Blöcke: 14=rechts, 15=links, 16=zufällig, 17=ausblenden
3. Bildunterschriften: Fügen Sie sie im „alt“-Attribut von „img“ hinzu.
Platzieren Sie für einen Hyperlink in einer Beschriftung „#randomname“ im „alt“-Attribut.
Anschließend platzieren Sie (irgendwo) in Ihrem HTML-Code <div id="arbitrary name" style="display: none;"><a href="(url)">Linkname</a></div>.
(Wenn Sie das Bild selbst als Hyperlink verwenden möchten: <a href="(url)"><img src=... /></a>).
Hier dazu die Demoseite: Bildwechsel 4
Code: Alles auswählen
<link href="imageswap.css" rel="stylesheet" type="text/css"/>
<script src="imageswap.js" type="text/javascript"></script>
Code: Alles auswählen
<div id="bw6Frame">
<div id="bw6">
<!-- Geben Sie hier die Bilder ein -->
<img src="/foto1.jpg" alt="Komplett anpassbar an Ihre Wünsche"/>
<img src="/foto2.jpg" alt="Mit oder ohne Untertitel..."/>
<img src="/foto3.jpg" alt="Mit oder ohne Übergangseffekte..."/>
<img src="/foto4.jpg" alt="Mit oder ohne Navigationskreise"/>
<img src="/foto5.jpg" alt="#hyperlink1"/>
</div>
<!-- Sie können wie folgt einen Hyperlink in einer Beschriftung erstellen. Wo Sie dies in Ihrem Code platzieren, ist unerheblich. -->
<div id="hyperlink1" style="display: none;">
Hyperlink: <a href="xyz.be/javascript">xyz website</a>
</div>
</div>
Speichern Sie das Bild „bullet.png“, wenn Sie Navigationskreise verwenden wollen, und platzieren Sie sie im selben Ordner.
KOMMENTARE:
1. Navigationskreise: werden automatisch vom Skript erstellt.
Im CSS-Klassenselektor .navigatierondjes können Sie Platzierung und Stil anpassen.
Wenn Sie keine Navigationskreise wünschen, blenden Sie diese mit div.navigation Circles {display:none;} aus.
2. Übergangseffekte: Diese können Sie in den Optionen (Effekt) in imagechange6.js festlegen.
1-8 = Streifen: 1=oben links, 2=oben rechts, 3=unten links, 4=unten rechts, 5=oben+unten links, 6=oben+unten rechts, 7=links falten, 8=rechts falten
9-12 = einschieben: 9=links, 10=rechts, 11=oben, 12=unten
13 = verblassen
14-17 = Blöcke: 14=rechts, 15=links, 16=zufällig, 17=ausblenden
3. Bildunterschriften: Fügen Sie sie im „alt“-Attribut von „img“ hinzu.
Platzieren Sie für einen Hyperlink in einer Beschriftung „#randomname“ im „alt“-Attribut.
Anschließend platzieren Sie (irgendwo) in Ihrem HTML-Code <div id="arbitrary name" style="display: none;"><a href="(url)">Linkname</a></div>.
(Wenn Sie das Bild selbst als Hyperlink verwenden möchten: <a href="(url)"><img src=... /></a>).
Hier dazu die Demoseite: Bildwechsel 4