Anpassungen - Adventskalender 10

Auf dieser Seite gebe ich einige Tipps und Anleitungen zur Anpassung des Adventskalenders 10. Eigentlich müssen sie lediglich den Titeltext für den Adventskalender ändern. Alles andere sollte so funktionieren. Probieren sie es aus.

In diesem Adventskalender 10 verwende ich noch die ältere Scriptversion. Das sind explizit die Funktionen zur Datumsanzeige, zur Datumsprüfung und für die Anzeige der Tageszahlen bei MouseOver.

Wie in den allgemeinen Nutzungsbedingungen für Web-Toolbox-Scripte fetsgelegt ist, dürfen sie das Kalender-Script natürlich anpassen und verändern. So könnten sie das Kalender-Beispiel für einen ganz andreren Zweck einsetzen. Beispiel: Countdown und Rätsel für eine Weihnachtsfeier. Das Beispiel hier, ein Countdown-Kalender, hat lediglich 15 Türchen die Tag für Tag ein wenig mehr Informationen preisgeben sollen. Der Countdown der Datumsfunktion ist logischerweise auf den 15. Dezember ausgerichtet.

Demo: Beispiel ansehen

<!-- Edit-Marker Headline -->

<div class="titel">Adventskalender 10 ...</div>

<!-- Edit-Marker Headline -->

<div class="titel">Adventskalender 2010 - SC Münster 1936</div>

Adventskalendder Titeltext ändern	Video	Download
Sie können zu diesem Thema auch ein kurzes Flash-Video ansehen. Die Datei ist allerdings 2,1 MB groß. Alternativ dazu können sie den Film (1,6 MB) auch als ZIP-Datei herunterladen.	2,1 MB	1,6 MB

/* Edit-Marker 02 Titelformat */

.titel {
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:18px;
font-weight:bold;
color:#3F3F3F;
}

// Bildfenster Anfang ::::::::::::::
var BildArray = new Array();

var TextFarbe = "#FFFFFF";
var HintergrundFarbe = "#000000";
var FensterBreite = 650;
var FensterHoehe = 500;

// 24 Bildadressen hier eintragen

BildArray[BildArray.length] = "fotos/aufnahme001.jpg";
BildArray[BildArray.length] = "fotos/winter.jpg";
BildArray[BildArray.length] = "fotos/eislaufen.jpg";
...
BildArray[BildArray.length] = "fotos/aufnahme024.jpg";

// 24 Bildadressen und Texte hier eintragen
// 1. Eintrag 1. Dez., 2. Eintrag Text zum Bild 1. Dez.
// 3. Eintrag 2. Dez., 4. Eintrag Text zum Bild 2. Dez.

BildArray[BildArray.length] = "aufnahme001.jpg";
TextArray[TextArray.length] = "Beschreibung 1";
BildArray[BildArray.length] = "foto02.jpg";
TextArray[TextArray.length] = "Beschreibung 2";
...
BildArray[BildArray.length] = "fotos/aufnahme024.jpg";

In diesem Kalender können sie eine animierte Grafik (z.B. blinkender Stern) über dem Dorf plazieren. Die Vorbereitungen dazu habe ich bereits getroffen. Das ist natürlich nur eine Anregung. Die Position legen sie selbst fest. Schwebende Engelchen, zusätzliche Weihnachtsbäume, Santa mit Schlitten oder am Weihnachtatag einen großen Stern. Denkbar wäre auch ein (na ja) Feuerwerk am Silvesterabend. Datenquelle: www.kneller-gifs.de

<!-- Anfang DIV blinkender Stern -->
<div id="stern" style="position:absolute;top:200px;left:430px;">
<img src="stern-hell.gif" width="25" height="31" border="0" alt="">
</div>
<!-- Ende DIV blinkender Stern -->

Für die Position entsprechende X-Y-Werte eintragen. Für Weitere Objekte gehen sie nach dem selben Schema vor und notieren ihre Codezeilen am Besten gleich unterhalb des BODY-Tags. Beispiel für die Grafik 'stern-gross.gif'

<!-- Anfang DIV stern02 -->
<div id="stern02" style="position:absolute;top:150px;left:500px;">
<img src="stern-gross.gif" width="100" height="100" border="0" alt="">
</div>
<!-- Ende DIV stern02 -->

/* Schriftformatierung Tageszahl */

.disp {
color:#FFFFFF;
font-size:30px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-weight:bold;
background-color:#8080FF;
border:1px solid #000000;
width:60px;
line-height:180%;
text-align:center;
position:absolute;
left:25px;
top:-500px;
}