 Textrotation 02 automatische Anzeige
Kontinuierliche Rotation von Textnachrichten. In einem Array abgelegte Textstrings werden zeitgesteuert nacheinander angezeigt. Die Positionierung und Formatierung der einzelnen Elemente des Anzeigebereichs wurden durch CSS-Anweisungen umgesetzt.
|
|
Kurztexte nacheinander automatisch anzeigen
Das Ganze habe ich ein wenig nett 'verpackt'. Durch eine Begrenzung (Breite) und entsprechender Höhe des Anzeigebereichs erreiche ich eine mehrzeilige Anzeige bei längeren Texten auch ohne erzwungenen Zeilenumbruch mit <br>. Weil ich den Text vor einer Sprechblase anzeigen lasse, erhalte ich eine ansprechendere Darstellung.
Mit alternativen Sprechblasen (siehe oben) können Sie das Beispiel anpassen.  Demo-02 
Der Vorteil einer rechteckigen Grafik liegt im größeren Textbereich, der im Gegensatz zur ovalen Form weit mehr Raum für Text bietet. Klar, der Text wird dann nicht zentriert sondern links ausgerichtet.
Demo01 - WetterBox (ovale Grafik)
Winterwetter in Geilenkirchen
im Jahr 2011
Schneemann-Grafik: www.kneller-gifs.de
Beliebig viele Anzeigetexte, die in einem Array abgelegt wurden, mit JavaScript nacheinander einblenden. Nach einem kompletten Durchlauf beginnt die Anzeige von vorn. Das Ganze habe ich als Anzeige innerhalb einer Sprechblase 'verpackt'. Durch den Austausch der fest positionierten Grafik (z.B. Ihr Logo / Markenzeichen) geben Sie der Anzeige ein zur Seite passendes 'Outfit'. Jede simple Clipartgrafik in passenden Abmessungen tuts auch.
Die angezeigten Texte können Sie mit HTML-Angaben oder CSS-Inlineanweisungen formatieren. Natürlich ist eine Anzeige der Box auch ohne Rand und Hintergrundfarbe möglich. Die CSS-Formatierung der Grundeinstellungen für den angezeigten Text und dem Anzeigebereich (AnzeigeBox) habe ich getrennt. So können Sie die Anzeige individuell gestalten.
Querverweis:  Textrotation 03 - Sprechblasentext auto + manuell
Aufwand für den Webmaster
- Script in den Head-Bereich kopieren
- CSS-Anweisungen in den Head-Bereich kopieren
- <div>-Anweisungen im Body notieren
- Geschwindigkeit anpassen
- Textnachrichten anpassen
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
a Die Textelemente werden in einem Array abgelegt:
Texte2[Texte2.length] = 'Duchschnittstemperatur:<br>Januar - März<br>2,9 Grad Celsius';
Texte2[Texte2.length] = 'Niederschlag im Januar:<br><br>3,48 mm';
Texte2[Texte2.length] = 'Sonnenscheindauer täglich:<br><br>etwa 6,51 h';
Texte2[Texte2.length] = 'Der Straßenzustand:<br><br>ist entsprechend schlecht :-)';
Texte2[Texte2.length] = 'Freilebende Gummibärchen gibt es nicht. ... alle Sinne.';
Erweitern Sie die Liste der Texte indem Sie weitere Array-Elemente notieren. Durch mein System der Notierung ist eine fortlaufende Nummerierung der Arrayelemente nicht erforderlich. HTML-Tags und CSS-Inlineanweisungen sind erlaubt!
b DIV-Definition am Ort der Anzeige
<!-- Anfang WetterBox -->
<div id="WetterBox">
<img id="WetterGrafik" src="schneemann20.gif" width="125" ... alt="">
<div id="WetterAnzeigeBox"></div>
<div id="WetterText">Winterwetter in Geilenkirchen<br>im Jahr 2011</div>
<div id="WetterFussText">Schneemann-Grafik: www.kneller-gifs.de</div>
</div>
<!-- Ende WetterBox -->
c Formatierung der Anzeige mit CSS
Für die AnzeigeBox und den eigentlichen Text habe ich separate CSS-Anweisungen notiert. So können Sie die Größe der Box und die Formatierung (Hintergrund, Rand) getrennt festlegen.
CSS-Anweisungen im Head-Bereich:
<style type="text/css">
<!--
#WetterBox {
position:relative;
width:550px;
height:170px;
margin: 0px;
padding:0px;
background-color: #FFFFFF;
}
#WetterGrafik {
position:absolute;
top:0px;
left:0px;
width:130px;
}
#WetterAnzeigeBox {
position:absolute;
top:0px;
left:150px;
height: 130px;
width: 300px;
background:url(sprechblase02.png) no-repeat;
}
#WetterText {
position:absolute;
top:30px;
left:205px;
height: 70px;
width: 210px;
text-align:center;
font-size:12px;
color:#0090E0;
overflow:hidden;
}
#WetterFussText {
position:absolute;
top:145px;
left:0px;
height: 20px;
width: 540px;
}
-->
</style>
d Anzeigezeit
Die Rotationsgeswindigkeit wird in Millisekunden eingetragen:
var StartVerzoegerung = 3000; // StartVerzögerung in Milliseunden
var Anzeigezeit = 4000; // Rotations-Delay in Milliseunden
Für den vollständigen Quellcode klicken Sie oben auf "Quellcode"
verwendete Grafik:
alternative Grafik:
Mit alternativen Sprechblasen können Sie dieses Beispiel anpassen. Demo-02
Der Vorteil einer rechteckigen Grafik liegt im größeren Textbereich, der im Gegensatz zur ovalen Form weit mehr Raum für Text bietet. Klar, der Text wird hier nicht zentriert sondern links ausgerichtet.
Anwendungsbeispiele zur Textanzeige / Texteinblendung
Textrotation 01 - zeilenweise automatische Anzeige
Textrotation 03 - Sprechblasentext auto + manuell
Textticker 01 - buchstabenweise Anzeige (Schreibmaschine)
Headliner News-Box - (längere) Nachrichten mit Überschrift + Link
Scroller-Box 02 - (modifiziertes Fremdscript)
Anzeigetafel-Text 01 - Flippbord - Buchstaben einzeln ersetzen
Objekte beim Anklicken ein- und ausblenden - Version 01
Objekte beim Anklicken ein- und ausblenden - Version 02
| 
Home • DHTML • Textrotation 02
DOWNLOAD