 Adventskalender Modifikation - Formatierung der PopUp-Box (erweitert)
In der Mehrzahl meiner angebotenen Online-Adventskalender erscheint bei MouseOver des Klickbereichs eine Info-PopUp-Box. Diese Box signalisiert, welches Türchen des Kalenders sich in diesem Bereich versteckt kann aber auch mehr Info anzeigen.
|
|
Erweiterte Gestaltung Formatierung der PopUp-Box
Wie im Adventskalender 05 standardmäßig vorgesehen, können sie in der PopUp-Box statt der Tageszahl für jeden Tag unterschiedliche Texte und sogar Grafiken anzeigen lassen.
- unterschiedliche Texte
- Textgröße, Gewicht und Farbe
- Grafiken
- Hintergrundfarbe
- Größe der Box
 Demo Adventskalender 05
| |
|
Texte der PopUp-Box
In meinen Kalendervorlagen mit Anzeige der Tageszahl (PopUp-Box) sind lediglich Ziffern eingtragen. Zum Ändern suchen sie im Quellcode die unten angezeigten Zeilen und ersetzen diesen Codeblock mit den Codezeilen, die ich weiter unten zum Kopieren anbiete.
üblicher Codeblock für Ziffern in der PopUp-Box
descarray = new Array(
"0","1","2","3","4","5","6","7", ... ,"20","21","22","23","24"
);
alternativer Codeblock für Texte in der PopUp-Box
(hier kopieren und in ihren Kalender statt des Standard-Codeblocks einfügen)
descarray = new Array(
'0<br>',
// Inhalte für die PopUp-Box
'Klicken öffnet das<br>Türchen Nr. 1',
'Klicken öffnet das<br>Türchen Nr. 2',
'Klicken öffnet das<br>Türchen Nr. 3',
'Klicken öffnet das<br>Türchen Nr. 4',
'Klicken öffnet das<br>Türchen Nr. 5',
'Klicken öffnet das Türchen Nr. 6<br>Heute ist Nikolaustag<br>',
'Klicken öffnet das<br>Türchen Nr. 7',
...
'Klicken öffnet das<br>Türchen Nr. 23',
'Klicken öffnet das<br>Türchen Nr. 24<br>Heiligabend<br>'
);
Die 24 Anweisungen der Anzeigeinformationen für einen bestimmten Tag müssen bis zum abschließenden Komma in einer fortlaufenden Zeile stehen und dürfen keine realen (durch die Eingabetaste eingefügten) Zeilenümbrüche enthalten!
Sonst erhalten sie die Fehlermeldung: "nicht abgeschlossene Zeichenfolgekonstante"
Wie sie feststellen sind HTML-Tags erlaubt. Demzufolge können also auch IMG-Tags für Grafiken eingetragen werden.
Text in der PopUp-Box formatieren
Für die Anzeige innnerhalb der Box editieren sie die CSS-Anweisungen für Hintergrundfarbe, Schrifttype, Schriftfarbe und Schriftgröße die normalerweise für die groß dargestellte Zahl vorgesehen ist. Eine normale Textanzeige werden sie in einer kleineren Schriftgröße darstellen wollen.
/* Edit-Marker 03 Tageszahl */
.zahl {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
color: #FFFFFF;
font-weight:bold;
background-color:#000080;
height:150px;
width:200px;
border:1px solid #FFFFFF;
Größe der PopUp-Box
.zahl {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 28px;
color: #FFFFFF;
font-weight: bold;
background-color:#000080;
height:150px;
width:200px;
border:1px solid #FFFFFF;
}
Dort tragen sie die benötigten Maße ein, wenn sie eine einhheitlich große Info-Box anzeigen möchten..
alte Versionen
Wenn sie in früheren Jahren bereits einen meiner kalender herunter geladen haben, können sie die Gße der Box ebenfalls verändern:
Im Quelltext der älteren kalenderdateien finden sie einen Kommentar (Tabelle für die PopUp-Box). Wenige Codezeilen darunter die Einträge für die Größenangaben der PopUp-Box, die standardmäßig mit 65 x 65 Pixel festgelegt ist.
// :::::::: Tabelle für die PopUp-Box ::::::::
... +"<table height=65 cellspacing=0 cellpadding=0 border=0 width=65><tr>
|
Home • Adventskalender • PopUp-Box erweitert