 Headliner News-Box Nachrichten mit Überschrift + Link
Ich habe das Modul Textrotation um einige Funktionen erweitert!
Kontinuierliche Rotation von Textnachrichten. In einem Array abgelegte Nachrichten werden zeitgesteuert nacheinander angezeigt. Formatierung durch CSS-Anweisungen.
|
|
Formatierte Überschriften + Kurztexte in einer Box nacheinander anzeigen
Die Überschrift der Nachrichten wird automatisch in unterschiedlichen Farben angezeigt. Die Auswahl der Farbwerte ist in einem Array abgelegt.
Interessant ist der Umstand, das zur Formatierung des Nachrichtentextes HTML-Tags oder CSS-Inlineanweisungen notiert werden dürfen.
Die Formatierung der NewsBox und deren Inhalte habe ich getrennt. Die Hohe der NewsBox kann mit einem festen Wert oder variabel (auto) eingestellt werden:
height:250px;
height:auto;
|
Die neuesten Schlagzeilen lesen Sie hier
|
Aufwand
- Script in den Head-Bereich kopieren
- CSS-Anweisungen in den Head-Bereich kopieren
- <div>-Deklaration im Body notieren
- Textmeldungen für den Array eintragen
- Geschwindigkeit anpassen
- Änderungen der Formatierung nach Bedarf
Die NewsBox erscheint innerhalb Ihrer Seite dort, wo Sie die <div>-Deklaration notieren:
<!-- NewsBox -->
<div id="AnzeigeBox">
<div id="Anzeige">Die neuesten Schlagzeilen lesen Sie hier</div>
</div>
Nachrichten
Innerhalb der Box sind für die Anzeige 3 unterschiedliche Bereiche vorgesehen:
<span id="Headline">Überschrift</span>
<span class="Zeile">Text Text ... </span>
<span class="Link">Verweis</span>
Die Nachrichten werden in einem Array abgelegt (in der Notierung ohne 'harte' Zeilenumbrüche). Die Elemente des Arrays sind durchgehend nummeriert.
Texte[0] = '<span id="Headline">Überschrift 1</span>
<span class="Zeile">Text 1 ...</span>
<span class="Link"><a href="datei1.htm">[mehr]</a></span>'
Texte[1] = '<span id="Headline">Überschrift 2</span>
<span class="Zeile">Text 2 ... </span>
<span class="Link"><a href="datei2.htm">[mehr]</a></span>'
Texte[2] = '<span id="Headline">Überschrift 3</span>
<span class="Zeile">Text 3 ... </span>
<span class="Link"><a href="datei3.htm">[mehr]</a></span>'
Texte[3] = '<span id="Headline">Überschrift 4</span>
<span class="Zeile">Text 4 ... </span>
<span class="Link"><a target="_blank" href="datei4.htm">[mehr]</a></span>'
Texte[4] = '<span id="Headline">08.08.2010 - Geilenkirchen</span>
<span class="Zeile">Ein Sack Reis umgekippt. ... </span>
<span class="Link"><a href="javascript:PopUpWindow10(\'datei5.htm\')" ... </span>'
Farbwerte für die Überschriften
Die Farbwerte werden in einem Array abgelegt. Die Anzahl ist beliebig und unabhängig von der Anzahl der nachrichten. Falls alle Überschriften gleichfarbig sein sollen, notieren Sie nur einen Wert.
var Farben = new Array();
Farben[0] = '#FF7F00';
Farben[1] = '#00AFFF';
Farben[2] = '#00BF00';
Farben[3] = '#DF00FF';
Farben[4] = '#9000E0';
Farben[5] = '#FFB9C0';
CSS-Formatierung
Neben den hier dargestellten Anweisungen für die Box, die Überschrift und den Nachrichtentext wurden weitere CSS-Anweisungen wurden für Verweise und (wegen Padding beim FF) für die Innenbox notiert (siehe Quellcode).
AnzeigeBox
#AnzeigeBox {
height:250px; /*height:auto;*/
width:200px;
border:1px solid #00AFFF;
background-color:#F9FFF9;
text-align:left;
}
Überschrift
#Headline{
font-family:Arial,Helvetica,sans-serif;
font-weight:bold;
font-size:12px;
color:#000000;
}
Nachrichtentext
#Anzeige .Zeile{
font-family:Arial,Helvetica,sans-serif;
float:left;
padding-top:10px;
font-size:11px;
color:#3F3F3F;
}
Anwendungsbeispiele zur Textanzeige / Texteinblendung
 Textticker 01 - buchstabenweise Anzeige (Schreibmascine)
Textrotation 02 - Kontinuierliche Rotation von Textnachrichten (Array)
Anzeigetafel-Text 01 - Flippbord - Buchstaben einzeln ersetzen
| 
Home • DHTML • Headliner News-Box
Beispiel