 Adventskalender 07 Modifikationen Grafiken
Adventskalender mit 24 anklickbaren Grafiken. Durch den Einsatz passender Grafiken sollte der Kalender leicht an das Thema ihrer Seite anzupassen sein. Bei Grafiken von 100 × 100 Pixel wird als Mindestmaß etwa 800 Pixel Bildschirmbreite vorausgesetzt.
|
|
Einbinding der Grafiken - Beschreibung
Der Kalender zeigt 24 identische oder unterschiedliche Grafiken die als Verweisfläche deklariert sind.
Sie können eigene Grafiken oder Fotos verwenden.
Wie die Grafiken in den beiden Varianten eingebunden sind und die Vorgehensweise zur Einbindung eigener Grafiken lesen Sie hier.
|  |
24 Grafiken
Der Kalender zeigt 24 identische oder unterschiedliche Grafiken. Die im Kalender 07 Variante 01, 02, 03 + 04 verwendeten Grafiken sind unter Dateinamen mit fortlaufender Endnummer abgelegt (Beispiel: 'fenster01.gif' bis 'fenster24.gif').
Bei der Variante 07-05 wird ein und dieselbe Grafik 24 mal (in 24 Tabellenzellen) angezeigt. Die URL der Grafiken wird im Quellcode der Kalenderdatei nur ein mal an zentraler Stelle eingetragen. Für Bastler: Rein theoretisch könnte der Kalender (gesteuert über ein Datumsscript) auch täglich oder zufällig eine andere Grafik ihrer Wahl anzeigen.
Die Grafiken sind im Download enthalten und dürfen ausschließlich für meine Kalendervorlagen verwendet werden! Wenn Sie eigene Grafiken entwerfen möchten verwenden sie Miniansichten Ihrer Fotos oder suchen nach geeigneten Cliparts.
Anpassungen
In allen Varianten des Kalenders 07 sind die Grafiken innerhalb von Verweisen notiert. Die Grafiken dienen als klickbare Verweisfläche.
<a onMouseOver="popLayer(xx)" onMouseOut="hideLayer()" ...
<img src="grafik01.gif" width="100" height="100" ...
</a>
1 Einbindung von 24 unterschiedlichen Grafiken Kalender 07-01 bis 07-04
Die Grafiken werden innerhalb einer alles umfassenden Tabelle angezeigt. Die Tabelle hat nur eine einzige Tabellenzelle. Für diese Tabelle bestimme ich mit CSS den Rahmen, die Hintergrundfarbe und den Innenabstand zu den Grafiken.
<table id="kalender07">
<tr><td>
hier stehen die 24 Grafiken
</td></tr>
</table>
CSS: Die Angabe gilt für Tabellenzelle (td) der Tabelle mit der ID kalender07
#kalender07 td {
background-color:#0B560A;
padding:20px;
}
Um Abstände zwischen den Grafiken zu realisieren musste ich ein wenig 'trixen'.
Der Abstand zwischen den Grafiken wird durch CSS-Angaben bestimmt. Ich lege dazu die margin-Werte (Abstands-Werte) für die Grafiken fest. Die Hintergrundfarbe der alles umfassenden Tabelle 'leuchtet' für diesen Bereich durch.
|  |
CSS: Die Angabe gilt für Grafiken (img) der Tabelle mit der ID kalender07
#kalender07 img {
border: 1px solid #FFFFFF;
height:100px;
width:100px;
margin:5px;
}
2 Einbindung von 24 identischen Grafiken Kalender 07-05
Die Anzeige erfolgt innerhalb einer Tabelle mit 4 Tabellenzeilen und je 6 Tabellenzellen. In den 24 Tabellenzellen habe ich transparente Grafiken innerhalb von Link-Tags notiert. Die transparenten Grafiken dienen als klickbare Verweisfläche.
Die eigentliche Grafik binde ich mittels CSS-Angaben als Hintergrund der Tabellenzellen ein! Ein Austausch dieser immer gleichen Grafik ist so viel weniger zeitaufwändig, da man nur ein Mal an zentraler Stelle, eine Angabe für die URL der Grafik machen muss. Ich hätte an Stelle der transparenten Grafik auch ein NonBreakableSpaces (Leerzeichen) eintragen können, aber dann wäre die Verweisfläche für den Mauszeiger zu klein.
Der Abstand der Grafiken wird duch die Innenabstände (padding) der Tabellenzellen (<td>) bestimmt. Um den Abstand für die Grafiken an zentraler Stelle steuern zu können habe ich dazu eine CSS-Angabe eingetragen.
So kann man leichter mit dem Layout experimentieren und eine andere Hintergundgrafik bestimmen.
|  |
Notierung der Tabellenzellen
<table id="kalender07"><tr>
<td>
<a onMouseOver="BoxEin(event,xx)" ... >
<img src="transpixel.gif" width="100" height="100" border="0" alt="">
</a>
</td>
...
CSS: Die Angabe gilt für Tabellenzellen (td) der Tabelle mit der ID kalender07
#kalender07 td {
height:100px;
width:100px;
padding:10px;
background:url(100-paket-01.jpg) #000000 no-repeat center;
background-color:#FFFFFF;
}
| 
Home • Adventskalender • Kalender 07 • Beschreibung + Download
Demo
Unten rechts auf dem Bildschirm wird (Windows) normalerweise die Uhrzeit angezeigt. Dort kann man rechtsklicken und Kalender und Zeit ver- / einstellen.
