Textrotation 03  Sprechblasentext - automatisch + manuell

Rotation von Textnachrichten automatisch (zeitgesteuert) oder manuell. In einem Array abgelegte Textstrings werden (zeitgesteuert) nacheinander angezeigt. Formatierung und Positionierung durch CSS-Anweisungen.

Für das erste Modul zum Jahresanfang 2012 habe ich mir besondere Mühe gegeben: Ein etwas detailiertres Anwendungsbeispiel zur Anzeige von Texten in einer Sprechblase. Neuigkeiten, Vereins-, Event- oder Seiteninformationen in mehreren Texten anzeigen und automatisch oder manuell weiter blättern.

Demo1 ansehen

Demo2 ansehen

AnzeigeTitel beim Laden

Start-Text: Vereinbarungen

Formatierung hier 14 px #5F5F5F

AnzeigeInfo beim Laden

00

• Script in den Head-Bereich kopieren
• CSS-Anweisungen in den Head-Bereich kopieren
• <div>-Anweisungen im Body notieren
• Texte anpassen
• Eigenes Logo 160 x 200 Pixel einbinden

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

Texte01Arr = new Array()
Texte01Arr[Texte01Arr.length] = 'Ich warte am Schultor bis ein Bus kommt.';
Texte01Arr[Texte01Arr.length] = 'Ich halte Abstand von der Bordsteinkante.';
Texte01Arr[Texte01Arr.length] = 'Ich laufe nicht auf die Fahrbahn.';
Texte01Arr[Texte01Arr.length] = 'Ich laufe dem Bus nicht entgegen.';
Texte01Arr[Texte01Arr.length] = 'Ich gehe erst über die Straße, wenn ...';
Texte01Arr[Texte01Arr.length] = 'Laufen, Schubsen und Drängeln sind gefährlich.';
Texte01Arr[Texte01Arr.length] = 'Ich trete nicht gegen das Wartehäuschen.';
Texte01Arr[Texte01Arr.length] = 'Ich suche mir einen Platz und ...';
Texte01Arr[Texte01Arr.length] = 'Wenn ich stehen muss, halte ich mich immer fest.';
Texte01Arr[Texte01Arr.length] = 'Wir wollen nicht streiten, schreien und drängeln.';
Texte01Arr[Texte01Arr.length] = 'Ich halte den Bus sauber.';

var TexteAnzahl1 = Texte01Arr.length;

Texte01Arr[Texte01Arr.length] = '<span style="color:#FF007F">Haltestelle</span>';
Texte01Arr[Texte01Arr.length] = '<h4>Ich halte den Bus sauber.</h4>';
Texte01Arr[Texte01Arr.length] = '<img src="bus.gif" width="150" height="113" ... >';

<div id="Anzeige">
<div id="AnzeigeTitel">AnzeigeTitel bei Initialisierung</div>
<div id="AnzeigeLogo"><img src="logo-01.gif" width="160" ... alt=""></div>
<div id="AnzeigeSprech"><img src="sprechblase-01.gif" width="382" ... alt=""></div>
<div id="AnzeigeBox"></div>
<div id="AnzeigeTexte">AnzeigeText vor dem Start</div>
<div id="AnzeigeInfo">AnzeigeInfo bei Initialisierung</div>

<div id="Anzeigenavi">hier stünde der Code der Navigation</div>

</div>

<style type="text/css">
<!--

#Anzeige {
position:relative;
top:0px;
left:0px;
width:550px;
height:280px;
border:1px solid #8F8F8F;
margin: 0px;
padding:0px;
background-color: #FFFFFF;
}

#AnzeigeTitel {
position:absolute;
top:0px;
left:0px;
width:99%;
height:20px;
margin: 0px;
padding:0px;
text-align:left;
font-family:Arial,Helvetica,sans-serif;
color: #4F4F4F;
font-size:16px;
font-weight:bold;
}

#AnzeigeLogo {
position:absolute;
top:30px;
left:0px;
width:160px;
height:200px;
margin: 0px;
padding:0px;
}

#AnzeigeSprech {
position:absolute;
top:30px;
left:150px;
width:382px;
height:150px;
background: url(sprechblase-01.gif) 0px 0px no-repeat;
}

#AnzeigeBox {
position:relative;
top:60px;
left:195px;
width:300px;
margin: 0px;
padding:0px;
}

#AnzeigeTexte {
position:absolute;
top:40px;
left:210px;
width:300px;
height:120px;
margin: 0px;
padding:0px;
text-align:left;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
text-decoration:none;
color: #5F5F5F;
line-height:130%;
}

#AnzeigeInfo {
position:absolute;
top:210px;
left:190px;
width:356px;
height:20px;
margin: 0px;
padding:0px;
text-align:left;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:18px;
font-weight:normal;
color: #0090E0;
}

#AnzeigeNavi {
position:absolute;
top:250px;
left:0px;
width:542px;
height:20px;
margin: 0px;
padding:0px;
text-align:left;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:18px;
font-weight:normal;
color: #0090E0;
}

-->
</style>

var WechselZeit = 6000;      // Rotations-Delay in Milliseunden