Quermania - HTML, Javascript, CSS, Webdesign - Laufschriften - Lauftext - Computer

Marketing für Ihre Homepage: Für Suchmaschinen optimierte Werbelinks.

Mit der eigenen Homepage kann außerdem viel Geld verdient werden.

Schuld sind immer die Anderen. Wer das bei welcher Gelegenheit genau ist, kann man hier nachlesen.

Quermania folgen:

Impressum & Kontakt
Auf Quermania werben Smartphone Startseite

Suchen:

Auf einigen Seiten dieses Projektes sind Affiliate-Angebote integriert. Wenn etwas darüber gebucht oder gekauft wird, ist das eine Unterstützung, ohne dass sich dadurch der Preis ändert.

dieses Beispiel zeigen

Der Aufbau dieser Laufschrift erfolgt in zwei Schritten:

1. Javascript-Funktionen - Steuerung der Laufschriften

2. HTML - Inhalte der Laufschriften

Erklärung der Schritte im Menü "Anzeigen der Schritte"

Die hier vorgestellte Laufschrift funktioniert bei allen Browser- und Dokumenttypen. Sie ist somit unabhängig von der verwendeten HTML-Version.

1. Javascript-Funktionen

Damit die Laufschrift lückenlos läuft, besteht sie aus zwei Teilen. Als erstes werden für beide Teile mit den Variablen "pos1" und "pos2" die Startpositionen festgelegt.

Die Funktion "nachlinks()" übernimmt die Steuerung der Laufschriften. Hier werden die Laufschriften mit 'visibility="visible"' sichtbar gemacht und Variablen zugewiesen. Mit der If-Else-Abfrage wird die alte Position erfragt, neu berechnet und die neue Position zugewiesen (je nach Position einen Pixel zurück oder wieder vor zum Anfang).

Die Funktion "Laufschleife()" sorgt dafür, dass die Funktion "nachlinks()" nach einer einstellbaren Zeit (in Millisekunden) immer wieder neu aufgerufen wird.

2. HTML

Wichtig ist der Ereignisverweis "onload=nachlinks()" im Body-Tag. Er sorgt dafür, dass diese Javascript-Funktion gleich beim Laden der Datei ausgeführt wird.

Im Div-Tag werden die beiden Textteile vertikal positioniert und sind durch die zugewiesene "id=..." vom Javascript aus ansprechbar. Weitere Eigenschaften werden über ein zusätzliches Element (hier eine Tabelle) zugewiesen.

Wichtig ist auf jeden Fall, dass dem Text noch die Eigenschaft "white-space:nowrap;" zugewiesen wird. Sie verhindert den automatischen Zeilenumbruch, solange sich der Text noch außerhalb des sichtbaren Bildschirms befindet.

<body onload="nachlinks()">

<div id="laufschrift1" style="visibility:hidden;position:absolute;top:16px;">
<table><tr><td style="font-family:tahoma, arial, helvetica; font-size:12px; white-space:nowrap;">
Aktuelles               
        Neuigkeiten
</td></tr></table>
</div>

<div id="laufschrift2" style="visibility:hidden;position:absolute;top:16px;">
<table><tr><td style="font-family:tahoma, arial, helvetica; font-size:12px; white-space:nowrap;">
Tolles               
        Angebote
</td></tr></table>
</div>