Homepage-Tipps & -tricks für Webmaster mit HTML: Newsticker Textscroller Laufschrift mit Marquee   


Freitag, 24. März 2023

04:53

Homepage-Tipps & -tricks für Webmaster mit HTML

Newsticker - Laufschrift mit Marquee

Mit dem Html-Tag "Marquee" kann im Nu ein Newsticker bzw. eine Laufschrift für Ihre Homepage erzeugt werden. Durch bestimmte Attribute lässt sich die Laufrichtung, Geschwindigkeit, Verhaltensweise etc. regeln! Ggf. können Sie den Newsticker auch zusätzlich noch mit etwas CSS entsprechend stylen. Nachfolgend finden Sie dazu einige Beispiele:

Die Attribute von Marquee:

Newsticker nach rechts 
<marquee direction="right">Newsticker nach rechts</marquee>
Newsticker nach links 
<marquee direction="left">Newsticker nach links</marquee>
oszillierende Laufschrift 
<marquee behavior="alternate">oszillierende Laufschrift</marquee>
Laufschrift wird bis zum Ende der Zeile eingeschoben 
<marquee behavior="slide">Laufschrift wird bis zum
Ende der Zeile eingeschoben</marquee>
Laufschrift oszilliert 5x und stoppt am Ende 
<marquee behavior="alternate" loop="6">Laufschrift
oszilliert 5x und stoppt am Ende</marquee>
Nach 5x Umlaufen verschwindet die Laufschrift 
<marquee loop="5">Nach 5x Umlaufen verschwindet die Laufschrift</marquee>
schneller Newsticker 
<marquee scrollamount="8">schneller Newsticker</marquee>
langsamer Newsticker 
<marquee scrollamount="2">langsamer Newsticker</marquee>
Newsticker mit Abstand (nur IE + FF) 
<marquee hspace="150">Newsticker mit Abstand (nur IE + FF)</marquee>
Newsticker mit Grafik 
<marquee scrollamount="3"><img src="images/grafik.gif"> Newsticker
mit Grafik <img src="images/grafik.gif"></marquee>
Newsticker mit Link 
<marquee>Newsticker mit <a href="#">Link</a></marquee>

CSS-formatierter Newsticker:

bunter Newsticker 
<marquee class="marquee" behavior="alternate">bunter Newsticker</marquee>

Anweisungen in der CSS-Datei für bunten Newsticker:

.marquee
{
color: #fff;
border: 3px double #E10024;
background-image: url('images/bg.gif');
background-repeat: repeat-x;
line-height: 26px;
}

Up- and Down-Textscroller:

Textscroller nach oben 
<marquee direction="up" height="100" scrollamount="2">
Textscroller nach oben</marquee>
Textscroller nach unten 
<marquee direction="down" height="100" scrollamount="2">
Textscroller nach unten</marquee>

Marquee mit Javascript:

Newsticker mit Link, der beim Hovern langsamer wird! Hyperlink 
<marquee onmouseover="this.scrollAmount=1" onmouseout="this.scrollAmount=5">
Newsticker mit Link, der beim Hovern langsamer wird! <a target="_blank"
href="#">Hyperlink</a></marquee>
Newsticker mit Link, der beim Hovern stoppt! Hyperlink 
<marquee onmouseover="this.scrollAmount=0" onmouseout="this.scrollAmount=5">
Newsticker mit Link, der beim Hovern stoppt! <a target="_blank"
href="#">Hyperlink</a></marquee>

[ veröffentlicht am 15.02.2009 ] __________________________

zurück
 weiter



© 2007 - 2023 Copyright by homepage-vorlagen-webdesign.de | Hosted by 1&1 Internet SE

Diese Seite wurde zuletzt am 02.06.2018 17:28 aktualisiert.