Einfaches Laufband - Website X5 Hilfe - Die Helpsite

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

Einfaches Laufband

Scripte > Bildergalerien
Ein 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.
HTML-Code einfach nur kopieren und im Body zwischen <body>.....</body> an gewünschter Stelle einfügen. Pfade zu den Bilddateien sind dann noch gegebenenfalls anzupassen.

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
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" öffnet in gleichen Fenster -->
   <a href="wsX5Obj/Obj_IMG/bruecken_01.jpg" target="_blank">
       <img src="wsX5Obj/Obj_IMG/bruecken_01.jpg" width="260" height="170" border="0"></a>
   <a href="wsX5Obj/Obj_IMG/bruecken_02.jpg" target="_blank">
       <img src="wsX5Obj/Obj_IMG/bruecken_02.jpg" width="260" height="170" border="0"></a>
   <a href="wsX5Obj/Obj_IMG/bruecken_03.jpg" target="_blank">
       <img src="wsX5Obj/Obj_IMG/bruecken_03.jpg" width="260" height="170" border="0"></a>
   <a href="wsX5Obj/Obj_IMG/bruecken_04.jpg" target="_blank">
       <img src="wsX5Obj/Obj_IMG/bruecken_04.jpg" width="260" height="170" border="0"></a>
   <a href="wsX5Obj/Obj_IMG/bruecken_05.jpg" target="_blank">
       <img src="wsX5Obj/Obj_IMG/bruecken_05.jpg" width="260" height="170" border="0"></a>
   <a href="wsX5Obj/Obj_IMG/bruecken_06.jpg" target="_blank">
       <img src="wsX5Obj/Obj_IMG/bruecken_06.jpg" width="260" height="170" border="0"></a>
   <a href="wsX5Obj/Obj_IMG/bruecken_07.jpg" target="_blank">
       <img src="wsX5Obj/Obj_IMG/bruecken_07.jpg" width="260" height="170" border="0"></a>
</marquee>

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

Feedbacks zu ""

Kein Kommentar
Vielen Dank für Dein Feedback.
HTML5
Button Spenden

© 2009 - 2019





Besucher Statistik
» 4 Online
» 143 Heute
» 89 Gestern
» 143 Woche
» 5538 Monat
» 121860 Jahr
» 449616 Gesamt
Record: 2382 (29.03.2019)
Gesamt Downloads:
Zurück zum Seiteninhalt