Marquee Bilderlaufband - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
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
Downloads:
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.

Feedbacks zu ""

Jörg Schröder

12.11.2015, 19:00

+0 -0  

Hallo, habe ne Frage zum "Einfachen Laufband" mit eingefügten Bildern. Würde da gerne Werbelogos einfügen und diese verlinken. Wie lässt sich das den machen?
Vielen dank und Grüße,
Jörg Schroder

Die Links sind im Code ja schon enthalten.
Du musst nur falls es ein Link zu einer Seite sein soll immer bei href die Seite einfügen, statt das Bild, z.B. href="http://www.google.de"
Der Rest bleibt.

Reinhard Schmitz

18.11.2013, 23:18

+0 -0  

Hallo zusammen!

Eure Seite ist super! Danke an dieser Stelle für Eure Unterstützung bei der Gestaltung mit WebSite x5.
Habe das Laufband auf meiner Seite integriert und 6 Fotos hinterlegt. Leider werden nur 3 auf der Seite gezeigt. Im Programm selbst wiederum bekomme ich alle Aufnahmen präsentiert. Habe von der Programmierung selbt 0-Plan.
Wüßte gerne Eure Meinung dazu. Herzlichen Dank &
liebe Grüße an Euch.
Reinhard Schmitz

Bitte Dein Feedback

Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.

Login | Registrierung


            CAPTCHA
            Vielen Dank für Dein Feedback.
            Logo Host Europe
            Button Spenden

            © 2009 - 2020




            
            Besucher Statistik
            » 2 Online
            » 11 Heute
            » 99 Gestern
            » 568 Woche
            » 457 Monat
            » 58960 Jahr
            » 283166 Gesamt
            Record: 1144 (01.02.2020)
            Gesamt Downloads:
            Hosting by
            Zurück zum Seiteninhalt