Spielbegegnung Europameisterschaft Counter 01

Spielbegegnungs-Counter 01

Spielbegegnungs-Counter (nicht nur für Fußball) - UpDown-Counter

Der Unterschied zu meinem EventCounter01-Modul besteht in der Möglichkeit 2 Grafiksymbole einzubinden, die ohne großen Aufwand rasch ausgetauscht werden können.

Das eingestellte Zieldatum für diesen UpDown-Counter ist der Beginn der Spielbegegnung. JavaScript-Wert der Variable "DatumZiel": Innerhalb des Anzeigebereichs (Anzeige) habe ich mehrere <DIV>-Bereiche definiert. 'AnzeigeTitel' nimmt einen kurzen Text auf (hier: Deutschand - Portugal). Der Bereich 'InfoText' zeigt einen Text der Abhängig vom Status ist (Up- oder Down-Count): Zeit bis zum Beginn / Zeit seit dem Beginn. Der dritte Bereich 'CounterBox' beinhaltet die Grafiken für die digitalen Ziffern. Für die Darstellung von zwei Emblemen (Vereinslogo oder Flaggen) habe ich eine eigene Box festgelegt in der die beiden Logos links und rechts ausgerichtet werden. Die Größe der Bereiche sind im CSS-Block festgelegt. Zur Anpassung kann man alle Bereiche unterschiedlich positionieren und formatieren.

Counter Life-Demo

   schnelle Anpassung

Durch den Austausch der beiden Embleme (Flaggen, Logos) und des Textes sowie durch die Anpassung der Eintragungen für das Datum und den Spielbeginn ist dieser Counter schnell angepasst und kann immer wieder (wöchentlich?) eingesetzt werden. Natürlich eignet er sich nicht nur für die EM sondern für jede Spielankündigung und das nicht nur im Bereich Fußball. Sie ändern lediglich die Angaben für die beiden grafischen Symbole im CSS-Block und die Datum- / Zeitangaben im Script. Die im Beispiel eingesetzten Flaggen stammen aus meiner Mini-Image-Box. Dort finden Sie mehr als 200 Flaggen mit diesen Abmessungen. Der Link zur Unterseite: World Flags - Flaggen für Ihre Reiseberichte

Diese Codezeilen im CSS-Block ändern:

background: url(flagge-deutschland.gif) 0px 0px no-repeat;
background: url(flagge-portugal.gif) 0px 0px no-repeat;

background: url(holzbein04.gif) 0px 0px no-repeat;
background: url(thekenkicker.gif) 0px 0px no-repeat;

Diese Codezeilen im Script ändern:

var Text01 = "Deutschland - Portugal";
var DatumZiel = new Date('Jun 9 2012 20:45:00');

var Text01 = "Dorfturnier 2012";
var DatumZiel = new Date('Jul 22 2013 15:00:00');

Für die Verwendung auf Ihrer Vereinsseite setzen Sie natürlich auch eine andere Hintergrundgrafik für den gesamten Counter oder aber eine neutrale Farbe ein.

Diese Codezeile im CSS-Block ändern:

background: url(em-2012-01.jpg) #FFFFFF 0px 0px no-repeat;

background: url(verlauf.jpg) #FFFFFF 0px 0px no-repeat;
background-color: #FFFFFF;

   UpDown-Counter Spielbegegnungs-Counter 01

Der Counter ermöglicht in dieser Konstellation die Anzeige von 9 grafischen Ziffern und stellt den Wert im Format DDD:HH:MM:SS (deutsch: TTT:SS:MM:SS) dar. Dazu werden Grafiken zeitgesteuert ausgetauscht. Ein Zählvorgang kann die Maximal- und Minimalwerte 999:23:59:59 anzeigen, der Counter also für einen Zeitraum von 2,73 Jahren in beide Zählrichtungen eingesetzt werden.

Vor einer Hintergrundgrafik werden zwei Embleme, zwei kurze Textmeldungen und die Grafiksymbole (Ziffern) des Counters angezeigt. Wenn der Counter zunächst als DownCounter fungiert wird, schaltet er bei Erreichen des festgelegten Zeitpunkts automatisch um und beginnt mit dem UpCount.

Nach dem Umschalten vom Down- zum UpCounter wird die vorher angezeigte kurze Textmeldung (#InfoText) ab diesem Zeitpunkt durch eine andere ersetzt:

"Zeit bis zum Beginn" / "Zeit seit dem Beginn"


Die digitalen Ziffern und Hintergrundgrafiken habe ich selbst erstellt und liegen in diversen Versionen vor. Infos zur verwendeten Grafik finden sie weiter unten. Grafiken 


Aufwand für den Webmaster:

1) Script in den Head-Bereich kopieren
2) CSS-Anweisungen in den Head-Bereich kopieren
3) Aufruf der Funktion 'Spielbegegnung()' im Body-Bereich notieren
4) Grafiken im gleichen Ordner abspeichern

5) Grafiken und Text anpassen
6) Datum und Zeit anpassen

---

Für Schnellstarter

Lassen Sie sich von den langen Erklärungen hier nicht abschrecken und führen die oben aufgelisteten Schritte durch. Am Einfachsten ist es, die ZIP-Datei herunter zu laden und zu entpacken. Grafiken und eine Demo-Datei haben Sie dann bereits auf Ihrer Festplatte.

Falls Sie dann das Modul anpassen möchten, weitere Erklärungen benötigen oder mehr über die Funktionsweise erfahren möchten, lesen Sie den betreffenden Abschnitt unten.

---

   Aufruf im Body

Nachdem sie das JavaScript und die CSS-Anweisungen im Head-Bereich notiert haben und die Grafiken im gleichen Ordner abgelegt wurden, muss die Funktion zur Anzeige des Counters im Body-Bereich nur noch aufgerufen werden. Sie tragen den Funktionsaufruf an genau der Stelle ein, wo der Counter erscheinen soll.

<script type="text/javascript" language="JavaScript">
<!-- Begin

Spielbegegnung01()

//  End -->
</script>

Anpassungen:

Wenn Sie den Counter zu einem anderen Zweck einsetzen möchten ändern Sie im Script die Einträge für das Zieldatum und den Text01.

// ZielDatum Monatsbezeichnungen:
// Jan, Feb, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec
var DatumZiel = new Date('Jun 8 2012 18:00:00');

// Eintag für Text 01
var Text01 = "Polen Ukraine";

 

   Hintergrundgrafik

Diese Grafik stelle ich Ihnen für den Counter zur Verfügung. Die zweite Grafik (bg-begegnung-02.gif) ist im Download enthalten.

bg-begegnung-01.gif	bg-begegnung-02.gif	bg-begegnung-03.gif
bg-begegnung-04.gif	bg-begegnung-05.gif	bg-begegnung-06.gif

   Funktion

Der Counter errechnet die Zeitdifferenz zwischen dem Systemdatum und dem eingetragenen Zieldatum. Aus dieser Information entnimmt das Script die Werte für die Darstellung und weist entsprechende Grafiken zu, deren Anzeige im Sekundentakt auf den aktuellen Stand gebracht wird.

Beim Erreichen des Zieldatums ändert der Downcounter seine Funktion und wird zum Upcounter. Er zählt also Tage, Stunden, Minuten und Sekunden seit Verstreichen des von ihnen festgelegten Datumswertes hoch.

Das eingetragenes Counter-Ziel bzw. der Wert für die Grenze des Hoch- oder Herunterzählens wird der Variablen 'DatumZiel' zugeordnet:

var DatumZiel = new Date('January 30 2011 18:00:00');

Verwenden Sie bei dieser Schreibweise die englischsprachigen Monatsbezeichnungen. Eine Liste der engl. Monatsnamen steht als Kommentar im Quelltext.

Das Script leistet hier Schwerstarbeit! Jede Sekunde werden 9 Grafiken ausgetauscht. Das wird über die ID, die für jede Grafik vergeben und als Attribut im <img>-Tag notiert wurde, organisiert. Beispiel für eine Zifferngrafik:

<img id="z1" src="sw8.gif" width="12" height="14">

   Download alternative Zifferngrafiken

Einen Link zur Textdatei des Quellcodes und eine Downloadmöglichkeit finden sie im Kopfbereich dieser Seite. In der ZIP-Datei sind neben der HTML-Datei alle benötigten Grafiken enthalten. Alternative Hintergrundgrafiken laden Sie durch Rechtsklicken und speichern. Meine Grafiken dürfen sie für den EM-Counter frei verwenden.

Zifferngrafiken

Hier haben Sie die Möglichkeit einen Set der Ziffern separat herunter zu laden. In diesen beiden ZIP-Dateien sind alle Ziffern, ein Trennzeichen und eine transparente Grafik enthalten.

	ZIP-Datei
	ZIP-Datei

Weitere Ziffern-Grafiken finden sie in meiner MINI-IMAGE-BOX. Ich habe 13 unterschiedliche Sätze digitaler Ziffern zum Download hochgeladen. Die Auswahl soll später noch erweitert werden. Wenn sie möchten, können sie also weitere, eigene Varianten des Counters mit diesen Grafiken erstellen.

MINI-IMAGE-BOX, Menü: Digitale Ziffern   zur MINI-IMAGE-BOX





   Info zum inoffiziellen EM-Logo 2008

Bei der Fußball-Weltmeisterschaft war es ein einziges Ärgernis! Wer durfte das WM-Logo verwenden, wem war es verboten? Welche Kosten fallen an?

Bei der Europameisterschaft 2008 in Österreich und der Schweiz wurde das einfacher. Um nicht Lizenzgebühren bei der UEFA zahlen zu müssen, gab es neben dem offiziellen Logo für die Europameisterschaft auch ein inoffizielles EM-Logo.

Ein Webportal in Östereich hatte einen Wettbewerb um das Logo ausgeschrieben. Auf der Seite emlogo.at können sie alles nachlesen. Der Gewinner steht fest und das Logo wird auf der Webseite zum Download angeboten. emlogo.at

Nutzungsbedingungen Zitat:

Das freie alternative EM-Logo kann kostenlos für jeden Zweck on- und offline verwendet werden. Es darf weder die EM, noch diesen Wettbewerb noch die Designer in schlechtes Licht rücken, noch können hier Haftungen und Ansprüche aus der Zurverfügungstellung abgeleitet werden. Wir stellen dieses Logo, das Voting etc. nur als Service für unsere Leser und die Internet-Gemeinde zur Verfügung. Bei Regelverstoß oder anderen wichtigen Gründen können wir das Nutzungsrecht auch wieder ohne Angaben von Gründen entziehen. Einen Zusammenhang mit der UEFA, der Europameisterschaft etc. gibt es nicht, das freie Logo ist nicht das offizielle EM-Logo und deshalb auch nicht an Lizenzen etc. gebunden.

Das Logo darf nicht verändert werden. Verweisen Sie bei der Bildquelle immer auf 'emlogo.at' (bei jedem Einsatz) und verlinken Sie auf 'www.emlogo.at' (zumindest einmal auf Ihrer Website - beispielsweise in einem Artikel über dieses Angebot). Einen Link zurück erhalten Sie gerne.

 




Fußball Europameisterschaft 01 - UpDown-Counter

Fußball Europameisterschaft 02 - UpDown-Counter

Fußball Weltmeisterschaft 01 - UpDown-Counter

Fußball Weltmeisterschaft 03 - UpDown-Counter

Event-Counter 01 - UpDown-Counter

Event-Counter 02 - UpDown-Counter

Event-Counter 300 - UpDown-Counter

UpDown-Counter Stundenzähler






   Counter

Grafische Counter biete ich auf meiner Seite in mehreren Varianten an. Weitere eventabhängige Counter mit entsprechenden Grafiken werden bei gegebenem Anlass rechtzeitig veröffentlicht (geplant: WM, Olympia?).