Bildwechsel 4

Moderator: HTML-Laie

Antworten
Benutzeravatar
Hape
Administrator
Beiträge: 336
Registriert: Fr 22. Mai 2020, 00:33

Bildwechsel 4

Beitrag von Hape »

Kopieren Sie diesen Code und platzieren Sie ihn im HEAD-Bereich Ihrer Seite:

Code: Alles auswählen

<link href="imageswap.css" rel="stylesheet" type="text/css"/>
<script src="imageswap.js" type="text/javascript"></script>
Kopieren Sie diesen Code und platzieren Sie ihn im BODY-Bereich Ihrer Seite:

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>
Laden Sie imageswap.js und imageswap.css herunter und legen Sie diese Dateien im selben Ordner ab.
imageswap.zip
(8.48 KiB) 155-mal heruntergeladen

Speichern Sie das Bild „bullet.png“, wenn Sie Navigationskreise verwenden wollen, und platzieren Sie sie im selben Ordner.
bullet.png
bullet.png (836 Bytes) 875 mal betrachtet

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

Antworten