Adventskalender 09   Bankenpleite

Diesmal ein Adventskalender für Zyniker. Durch den Einsatz von passenden Hintergrundgrafiken sollte der Kalender (versionsabhängig) ab einer Bildschirmbreite von 600 Pixeln einsetzbar sein und jede Fensterbreite komplett ausfüllen.

Neben der seintenfüllenden Version 09-01 (Vordergrundgrafik 950 Pixel) mit zwei Hintergrundgrafiken für rechts und links, die das Browserfester nahtlos ausfüllen, habe ich weitere Versionen hergestellt. Diese Kalender sind für Bildschirm- / Fensterbreiten ab 600 und 750 Pixel einsetztbar. Für die Variante 09-01 stelle ich mehrere Vordergrundgrafiken zur Verfügung.

a) Der Kalender 09-01 bietet ihnen nur wenige Anpassungsmöglichkeiten. Lediglich bei der Gestaltung der 24 Tagesdateien können sie ihrer Kreativität freien Lauf lassen. Beim Adventskalender 09 V01 wird eine Hauptgrafik (Bankenviertel Frankfurt) mit dem Abmessungen 950 x 640 Pixel verwendet. Deshalb empfehle ich den Kalender in einem neuen Browserfenster anzuzeigen. <a target="_blank" href="kalender ... >

b) Der Kalender 09-750 bietet ihnen nur wenige Anpassungsmöglichkeiten. Lediglich bei der Gestaltung der 24 Tagesdateien können sie ihrer Kreativität freien Lauf lassen. Beim Adventskalender 09-750 wird eine Grafik (Bankenviertel Frankfurt) mit dem Abmessungen 750 x 505 Pixel verwendet. Er kann also wegen der geringeren Breite auch in eine Seite integriert werden. Ich empfehle den Kalender in einem neuen Browserfenster anzuzeigen. <a target="_blank" href="kalender ... >

c) Der Kalender 09-600 bietet ihnen nur wenige Anpassungsmöglichkeiten. Lediglich bei der Gestaltung der 24 Tagesdateien können sie ihrer Kreativität freien Lauf lassen. Beim Adventskalender 09-600 wird eine Grafik (Bankenviertel Frankfurt) mit dem Abmessungen 600 x 404 Pixel verwendet. Er kann also wegen der geringeren Breite auch in eine Seite integriert werden. Eine Kalenderversion zum Einbau in ihre vorhandene Seitenstruktur.

Was ist eine Imagemap?

Verweissensitive Grafik (engl. image map).

Verweissensitive Grafiken bieten eine Möglichkeit, Hyperlinks innerhalb einer Grafik zu plazieren. Sie werden als rechteckige, runde oder freie Schaltflächen realisiert, die sich wie Verweise verhalten. Der sich verändernde Cursor der Maus deutet auf die nicht sichtbaren Schaltflächen hin.

Auf Web-Seiten häufig anzutreffende Beispiele sind Landkarten, in denen bestimmte Regionen zu den entsprechenden Seiten führen. Daneben findet man sie auch in „interaktiven“ Adventskalendern.

Ein solche Imagemap besteht aus einem eigentlichen Bild, das ganz normal mit einem <img>-Tag definiert wird, gleichzeitig wird bei diesem ein Attribut usemap angegeben, was auf die Imagemap verweist.

Erklärungen zur ImageMap

Aufwand

Funktion

Anpassungen

Bedingungen

Schneefall

Demo + Download als ZIP-Datei
Nr.	Tagesdatei	Breite	Demo	Kalender	Download ZIP-Datei
09-01	PopUp-HTML-Seite	950 Pixel	öffnen	öffnen	Kalender 09-01
09-750	PopUp-HTML-Seite	750 Pixel	öffnen	öffnen	Kalender 09-750
09-600	PopUp-HTML-Seite	600 Pixel	öffnen	öffnen	Kalender 09-600

Eine 100% breite Tabelle hat 3 Zellen. Die mittlere Zelle (horizontal zentriert) beinhaltet als Background-Grafik ein Hintergrundbild und im Vordergrund (als Inhalt der Zelle) die Grafik des Finanzviertels in Frankfurt. Die beiden anderen Zellen rechts und links beinhalten die Anschlussgrafiken, die gewährleisten sollen, dass die gesamte Bildschirmbreite ausgefüllt ist. Ich habe versucht Hintergrundgrafiken und Hauptgrafik so abzustimmen, das ein optisch annehmbarer Übergang entsteht. Durch diese Technik wird unabhängig von der Bildschirm- / Fensterbreite die gesamte Ansicht ausgefüllt.

• Der Adventskalender steht innerhalb einer Tabelle in der Seitenmitte
• Der Titel wird mit CSS positioniert
• Die Grafik hat Klickbereiche einer Image-Map
  
• Bei MouseOver erscheint dort eine Nummer von 1 bis 24
  
• Bei Klick wird ein Window mit der Tagesdatei geöffnet (1.htm - 24.htm)
  
• Bei Klick von Jan. - Nov. wird die Datei 00.htm gezeigt.
  
• Angezeigt werden nur Tagesdateien des aktuellen und früheren Datums
  
• Beim Klicken am 5. Dez. z.B. auf das Kästchen für den 12. Dez. wird 0.htm gezeigt.
  
• Die Windows schließen automatisch beim nächsten Mausklick
• Schneefallscript eingebaut  © Altan - Copyright-Info    Webseite
  
• aktuelles Datum wird angezeigt
• Counter: Tage bis Weihnachten werden angezeigt
• Adventssonntagewerden angezeigt
• Counter bis 1. Dezember wird angezeigt
• Nach dem 1. Dezember Aufforderung zum Klicken

• Adventskalender als HTML-Datei
• 24 Musterseiten (1-htm - 24.htm)
• 1 Musterseite Meldung 'zu früh' (00.htm)
• 1 Musterseite Meldung 'gemogelt' (0.htm)
• alle notwendigen Grafiken

Alles Notwendige ist getan!

Das war's schon! Nur wenn sie sich zusätzliche Arbeit machen und mehr über weitere Anpassungen erfahren möchten, lesen sie ab hier weiter.

Attribute01 =
... ,width=500,height=300'

Attribute02 =
... ,width=800,height=600'

body {
...
background-color:#E3F1FE;
margin:0px;
padding:0px;
}

<!-- Edit Marker Rahmen -->

<img style="border:10px solid #7983C0" ...

Die Finanzviertel-Grafik darf ohne meine Zustimmung nicht modifiziert werden (Ausnahme siehe unten 'frankfurt02.gif').

frankfurt02.gif

frankfurt03.gif

frankfurt04.gif

frankfurt05.gif

<img name="vordergrund" usemap="#Beispiel" src="frankfurt01.gif"

• PopUp-Box (Tageszahl) gestalten
• eigene Tagedateien erstellen
• meine Musterdateien modifizieren
• den Schneefall modifizieren
• eine Musikdatei einbinden
• eigene Pfadangaben eintragen