 UpDown-Counter 03 (Variante 04)
Für einige Counter habe ich separate Beispielseiten ohne weitere Erklärungen erstellt. Im Wesentlichen handelt es sich um Varianten durch unterschiedliche CSS-Anweisungen und verwendete Grafiken.
|
|
weiteres Update: 18.09.2008 07:00 Uhr, Info Counter als Verweis + Hintergrundgrafiken hinzugefügt
Anzeige: DDD : HH : MM : SS
Analog zum UpDownCounter 03-1 zeigt dieser grafische Counter den Tageswert dreistellig an. daraus ergibt sich ein Limit: von 2,73 Jahren in beide Zählrichtungen
Erklärungen zum UpDownCounter finden sie auf der Seite  UpDownCounter 03
Hier wurde der Counter einmal mit einer Hintergrundgrafik ein wenig anders 'verpackt'.
(Adventskalender gibts im Menü 'DIVERSES')
|
|
Der eigentliche Counter steht hier in einer Tabelle, für die eine Hintergrundgraik festgelegt wurde. Öffnen sie die Demo-Datei im PopUp-Window, um die Grafik ohne Counter zu sehen. Die Grafik ist im Zip-Download enthalten.
UpDownCounter in ihre Seite einbinden
Der Counter ist vielseitig einsetzbar. Abhängig von Größe und Farbe der Grafiken in Verbindung mit einer geeigneten Hintergrundgrafik kann der Counter als Blickfang auf eine Aktion innerhalb ihrer Seiten hinweisen. Die Hintergrundgrafik und digitalen Ziffern habe ich selbst erstellt und dürfen für den Counter frei verwendet werden. Ziffern und Hintergrundgrafik können sie als ZIP-Datei herunterladen.
Aufwand für den Webmaster:
1) Script in den Head-Bereich kopieren
2) Tabelle in den Body-Bereich kopieren
3) Grafiken im Unterordner 'images' abspeichern
4) Datum anpassen
Zum Testen des Scripts:
verstellen sie das Systemdatum  Nachdem sie das Datum verstellt haben, laden sie die Seite neu, indem sie 'Aktuelle Seite neu laden' (Refresh) anklicken.
JavaScript in ein HTML-Dokument 'einbauen'
1 Aufruf im Body
Nachdem sie das JavaScript und die CSS-Anweisungen im Head-Bereich notiert und die Grafiken im Unterordner 'images' abgelegt haben, fehlen nun noch die HTML-Anweisungen für die Darstellung. Im Body-Bereich wird die Tabelle mit der Hintergrundgrafik und den Startgrafiken notiert. Das soll an genau der Stelle geschehen, wo der Counter erscheinen soll.
Einen Link zur Textdatei mit dem gesamten Quellcode und eine Downloadmöglichkeit für die Grafiken finden sie im Kopfbereich dieser Seite. Meine Grafiken dürfen sie für den Counter frei verwenden.
2 Zieldatum
Zur Anpassung des Endwertes folgende Änderungen im Script:
| Variable |
hier im Beispiel |
ersetzen mit |
| dann |
new Date('December 1 2008 00:00:01') |
Datum- / Zeitwert |
Englische Schreibweise des Monatsnamens beachten:
January, February, March, April, May, June, July, August, September, October, November, December
3 Farben + Grafik
Gesamttabelle mit Hintergrundgrafik:
#anzeige01 {
height:262px;
width:200px;
border:none;
text-align:center;
background:url(images/web-20-clock-04.gif) #FFFFFF;
}
Counter als Verweis
Damit der eigentliche Counter vor der Hintergrundgrafik an der richtigen Position angezeigt wird, wurde oberhalb eine transparente Grafik entsprechender Höhe (125 Px) notiert (rose).
Das zahlt sich nun aus: Wenn sie die transparente Grafik in ein Verweis-Tag einschließen, dient die Grafik als Klickfläche für ihre Aktionsseite, z. B. für ihren Adventskalender.
Meinen Hinweis auf die Grafik entdecken sie im Quelltext leicht durch den Kommentar 'Abstand'.
Nicht nur theoretisch ist unterhalb des Counters weiterer Raum für eine transparente Grafik von etwa 100 Pixel Höhe (blau), den man entsprechend nutzen könnte.
|
|
<!-- hier könnten sie einen Verweis vorsehen -->
<!-- Abstand -->
<a titlet="zum Kalender" href="adventskalender.htm">
<img src="images/transpixel.gif" width="200" height="125" border="0" alt="">
</a>
Varianten
Der Counter wird bereits in mehreren Varianten angeboten.
Für die Beispiele werden in Farbe und Größe abweichende Zifferngrafiken eingesetzt und außerdem kann die Hintergrundfarbe und Umrandung mit CSS-Angaben festgelegt werden. Auf diese Countervarianten verweise ich im Menü (links) mit den Textlinks 'Beispiel Variante XX'.
NEU 15.09.2008 23:00 Uhr
Ich habe heute 13 unterschiedliche Sätze digitaler Ziffern zum Download in meine MINI-IMAGE-BOX hochgeladen. Die Auswahl soll später noch erweitert werden.
 zur Mini-Image-Box 
Wenn sie möchten, können sie also weitere, eigene Varianten des Counters mit diesen Grafiken erstellen.
 
 
 
Bei der Verwendung der beiden unteren Grafiken (siehe Demo 2), ist eine Anpassung des Abstands erforderlich (Höhe der transparenten Grafik)
Statt 120 tragen sie 136 Pixel ein!
<!-- abstand -->
<img src="images/transpixel.gif" width="1" height="136" border="0" alt="">
|
HOME
Grafiken 
ZURÜCK 
