 Anzeigetafel-Text 01
Ähnlich den Flipp-Buchstaben am Airport wird hier eine Textnachricht angezeigt. Ich habe das ganze einmal als Anzeigetafel verpackt. Denkbar wäre auch eine Verwendung für eine Preistafel, Reklametafel Bahnhofsanzeige oder Veranstaltungsinfo.
|
|
Anzeige Flippbord - Buchstaben einzeln ersetzen
In meinem Beispiel demonstriere ich diese Funktion für eine Flughafen-Anzeigetafel. Mit etwas Kreativität fällt ihnen sicher eine weitere Anwendung ein (siehe oben: Varianten).
Hier im Modul 'Anzeigetafel-Text 01' wird eine einzige Textzeile dargestellt. Nach dem Austausch der Buchstaben zur gewünscheten Anzeige beibt der Text statisch sichtbar.
Nachteil bei dieser Darstellung: Für eine mehrzeilige Anzeige muss man die Funktion auch mehrmals einbinden (je Textzeile 1 X). Dazu ist es unausweichlich die Funktion und verwendete Variablen jeweils mit unterschiedlichen Namen zu verwenden. Fazit: JavaScript-Anfänger sollten sich auf eine einzeilige Darstellung beschränken.
Ich arbeite an einer Variante bei der mehrere Texte nacheinander in nur einer Zeile angezeigt werden. Die Anzahl der Texte ist unbegrenzt. Nach einem Durchlauf kann der Vorgang anhalten oder erneut starten. Sollte in den nächsten Tagen fertig sein.
 Arbeitsdemo ansehen 
Funktion
Das JavaScript durchläuft Zeichen für Zeichen ihren Text und vergleicht und ersetzt den Anzeigetext mit dem vorgegebenen Zeichenvorrat im Array. Den Fortschritt des Durchlaufs können sie an dem derzeitig angezeigten Zeichen verfolgen. Bei Übereinstimmung wird das betreffende Textzeichen nicht mehr verändert.
Durch meine spätere Modifizierung (zur Anzeige von Leerzeichen) wird zusätzlich noch der Vergleich mit dem Unterstrich durchgeführt und bei Übereinstimmung ein NonBreakableSpace ( ) eingetragen. (Info siehe unten)
Aufwand für den Webmaster
Der Aufwand ist recht gering: Einfach das Script und die CSS-Anweisungen in den Head-berich kopieren und den Text anpassen. Im Body-Bereich an Ort und Stelle (dort wo die Anzeige erfolgen soll) den <div>-Bereich für die Anzeige notieren. Wenn Sie möchten positioniern Sie oberhalb der Anzeige eine passende Grafik.
Bitte entnehmen Sie den gesamten Quellcode für dieses Beispiel der Textdatei (Link oben im Kopfbereich). Dort können Sie ebenfalls eine Demo- bzw. eine Beispieldatei abrufen. Infos und Erklärungen zum 'Einbauen' von JavaScript  JavaScript Menü 01
Zur Anpassung Änderungen im Script:
| |
hier im Beispiel |
ersetzen mit |
| Text01 |
AX 0124 BERLIN landing 19:18 |
ihr Text |
| Geschwindigkeit |
setTimeout('anzeige01()',150); |
ihr Wert (statt 150) in ms |
Für das Auge: Die Grafiken
Ich verwende hier oberhalb der Anzeige eine Grafik (gelb) die einem Infobord im Flughafen ähnelt. Genauso könnte man eigene Kreationen herstellen oder Grafiken verwenden die z.B. denen der Bahn oder den Infotafeln des Nahverkehrs ähneln.
Hier einige Beispiele die auch auf den vielfältigen Einsatzbereich des Scripts hinweisen:
CSS-Anweisungen für den Anzeigebereich
Hintergrundfarbe und Breite sind im Block 'Anzeigetafel' festgelegt.
Zeichensatz / Schriftfamilie
Wegen der vertikalen Ausrichtung der einzelnen Zeichen (wichtig beim Mehrfacheinsatz des Scripts untereinander) wird für die Anzeige ein Monotype-Font verwendet. Da diese Schrifttype für jeden Buchstaben einheitliche Breiten nutzt, bleiben schmale Buchstaben (wie 'l') und breitere Buchstaben (wie 'm') einheitlich vertikal ausgerichtet!
Durch die Wahl der Textgröße (font-size) bestimme ich die Anzeigegröße der Lettern und damit indirekt den benötigten Raum für die Textanzeige / die Anzahl der möglichen Zeichen (kleine Schrift = mehr Zeichen auf gleichem Raum).
#Anzeigetafel {
width: 400px;
background-color: #6F6F6F;
}
#display01 {
text-align: left;
padding: 0px 0px 0px 5px;
font-family: monospace;
font-size: 18px;
color: #FFFFFF;
border: 5px solid #6F6F6F;
}
Info nachträgliche Modifizierung des Scripts
Da im Anzeigetext mehrere Leerzeichen hintereinader vom Script ignoriert würden und
a) der Anzeigetext aber häufig solche aufeinanderfolgenden Leerzeichen erfordert,
b) die Schreibweise mit nicht eingesetzt werden kann
habe ich die Funktion nun noch einmal modifiziert. Beispiel:
An Stelle der roten 'X' wären zur Ausrichtung Leerzeichen erforderlich
XX 0000 XXXXXX XXXXXXX 00:00
AX 0124 BERLIN landing 19:18
LT 0052 KÖLNXX delayed 20:25
Ich setze nun bei mehreren aufeinander folgenden Leerzeichen den Unterstrich an deren Stelle als Platzhalter ein und lasse diese Platzhalter vom Script durch Leerzeichen ersetzen:
XX 0000 XXXXXX XXXXXXX 00:00
AX 0124 BERLIN landing 19:18
LT 0052 KÖLN__ delayed 20:25
Das Script wandelt die Unterstriche in um.
| 
Home • DHTML • Anzeigetafel News-Box
