Marquee Bilderlaufband - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Scan QR or Download Android App
Direkt zum Seiteninhalt

Marquee Bilderlaufband

Scripte > Bildergalerien
Einfaches Bilderlaufband mit Marquee
Automatisch bewegende Bildelemente in Webseiten sind mittlerweile nicht mehr wegzudenken. So bieten sich aber auch vielseitige Einsatzmöglichkeiten an, wie z. B. die Verkündung von Neuigkeiten, aktuellen Nachrichten oder anderen Informationen. Es ist kein großer Aufwand solche Laufbilder mit einfachen Mitteln in Javascript zu programmieren, so dass sie mit allen gängigen Browsern kompatibel sind.
Eine ganz einfache Möglichkeit ein Laufband einzubinden, ist das marquee-Element. Dieses wurde ursprünglich von Microsoft entwickelt und lief deshalb auch ursprünglich nur im Internet Explorer, wird aber heute auch von anderen Browsern unterstützt. Trotzdem es bis heute nicht zum offiziellen Standard gehört, ist da der erste Ansatz.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HTML-Code einfach nur im Body-Bereich <body>.....</body> an gewünschter Stelle einfügen. Bilddateien austauschen und Code entsprechend anpassen.
Eine demo.html ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.
Aufruf: "http://www.domain.tld/demo.html". Diese kann aber auch durch einen Doppelklick ausgeführt werden.

Bei der Verwendung von <marquee>...</marquee>-Tag ohne Attribute wird eine Bildablauffolge standardmäßig von rechts nach links erzeugt.
Mit einigen Attributen kann man das Verhalten des Bildlaufes beeinflussen:
Download Button
x runter geladen
direction="..."
left
right
up
down

Bildelemente, die von links nach rechts laufen (Voreinstellung).

Bildelemente, die von rechts nach links laufen.

Bildelemente, die von unten nach oben laufen.
Bildelemente, die von oben nach unten laufen.
scrollamount="..."
Wert (Zahl)
Bestimmt die Pixelanzahl zwischen den Scrollzuständen.
Je höher der Wert ist, desto schneller scrollen die Bilder.
scrolldelay="..."
Wert (Zahl)
Legt die Verzögerung zwischen zwei Scroll-Zuständen in Millisekunden fest.
Je höher der Wert ist, desto langsamer scrollen die Bilder.
beavior="..."
alternate
Bewirkt, dass Bilder hin und her scrollen.
Standardeinstellung ist von links nach rechts in Wiederholung.
height="..."
Wert (Zahl)
Die Höhe des Scrollbereiches wird hiermit definiert.
Die Angabe erfolgt entweder in Pixeln oder in Prozent.
Code für den <BODY> Bereich
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="3" direction="right" width="840" height="200">
<!-- target="_blank" öffnet ein neues Fenster, target="self" im gleichen Fenster -->
<a href="wsX5Obj/Obj_IMG/bruecken_01.jpg" target="_blank">
<img src="wsX5Obj/Obj_IMG/bruecken_01.jpg" width="260" height="170" alt="Bild"></a>
<a href="wsX5Obj/Obj_IMG/bruecken_02.jpg" target="_blank">
<img src="wsX5Obj/Obj_IMG/bruecken_02.jpg" width="260" height="170" alt="Bild"></a>
<a href="wsX5Obj/Obj_IMG/bruecken_03.jpg" target="_blank">
<img src="wsX5Obj/Obj_IMG/bruecken_03.jpg" width="260" height="170" alt="Bild"></a>
<a href="wsX5Obj/Obj_IMG/bruecken_04.jpg" target="_blank">
<img src="wsX5Obj/Obj_IMG/bruecken_04.jpg" width="260" height="170" alt="Bild"></a>
<a href="wsX5Obj/Obj_IMG/bruecken_05.jpg" target="_blank">
<img src="wsX5Obj/Obj_IMG/bruecken_05.jpg" width="260" height="170" alt="Bild"></a>
<a href="wsX5Obj/Obj_IMG/bruecken_06.jpg" target="_blank">
<img src="wsX5Obj/Obj_IMG/bruecken_06.jpg" width="260" height="170" alt="Bild"></a>
<a href="wsX5Obj/Obj_IMG/bruecken_07.jpg" target="_blank">
<img src="wsX5Obj/Obj_IMG/bruecken_07.jpg" width="260" height="170" alt="Bild"></a>
</marquee>
Code für den <BODY> Bereich
<marquee onmouseover="this.stop()" onmouseout="this.start()"
scrollamount="3" direction="down" width="190" height="550">
<!-- target="_blank" öffnet ein neues Fenster, target="self" im gleichen Fenster -->
<a href="wsX5Obj/Obj_IMG/bruecken_01.jpg" target="_blank">
<img src="wsX5Obj/Obj_IMG/bruecken_01.jpg" width="190" height="100" alt="Bild">
</a><br><br>
<a href="wsX5Obj/Obj_IMG/bruecken_02.jpg" target="_blank">
<img src="wsX5Obj/Obj_IMG/bruecken_02.jpg" width="190" height="100" alt="Bild">
</a><br><br>
<a href="wsX5Obj/Obj_IMG/bruecken_03.jpg" target="_blank">
<img src="wsX5Obj/Obj_IMG/bruecken_03.jpg" width="190" height="100" alt="Bild">
</a><br><br>
<a href="wsX5Obj/Obj_IMG/bruecken_04.jpg" target="_blank">
<img src="wsX5Obj/Obj_IMG/bruecken_04.jpg" width="190" height="100" alt="Bild">
</a><br><br>
<a href="wsX5Obj/Obj_IMG/bruecken_05.jpg" target="_blank">
<img src="wsX5Obj/Obj_IMG/bruecken_05.jpg" width="190" height="100" alt="Bild">
</a><br><br>
<a href="wsX5Obj/Obj_IMG/bruecken_06.jpg" target="_blank">
<img src="wsX5Obj/Obj_IMG/bruecken_06.jpg" width="190" height="100" alt="Bild">
</a><br><br>
<a href="wsX5Obj/Obj_IMG/bruecken_07.jpg" target="_blank">
<img src="wsX5Obj/Obj_IMG/bruecken_07.jpg" width="190" height="100" alt="Bild">
</a><br><br>
</marquee>

Das marquee-Element kann man natürlich auch für Laufschriften nutzen. Dazu hier mehr.


» nach oben «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt