 Monatsbild 01 1 von 12 (getElementByID)
Das Bild des Monats anzeigen. Sie halten 12 Grafiken bereit die abhängig vom aktuellen Monat angezeigt werden sollen. Zusätzlich wird durch Zuordnung der 'title'-Informationen einer von 12 MouseOver-Texten angezeigt.
|
|
Eine von 12 Grafiken abhängig vom aktuellen Monat anzeigen
UPDATE 25.07.2010 Änderung des Scriptcodes + zeitverzögerter Aufruf der Funktion
 Bedingung hier: Die Dateinamen müssen einem System entsprechen und mit einer zweistelligen Zahl enden. Außerdem müssen die Grafiken im gleichen Ordner abgelegt sein. Anders ist das im Beispiel  Monatsbild 02 - Array
Sie möchten monatlich ein anderes Bild aus einer Auswahl von 12 Bildern anzeigen. Das Script ermittelt aus dem Systemdatum den aktuellen Monat und generiert daraus die Bild-Url.
Zu jeder Grafik wird der zugehörige 'title'-Text angezeigt, der in einem Register abgelegt wurde.
<img title="xxx" src="bild03.jpg" ...
Grafik für diesen Monat
|
|
|
Abhängig vom aktuellen Monat wird eines von 12 Bildern angezeigt. Dazu wird eine Platzhaltergrafik durch ein Script gegen die betreffende Grafik ausgetauscht. Aus dem aktuellen Datum wird der Monatswert ermittelt aus dem widerum eine zweistellige Ziffer generiert wird.
|
Vorgaben
1) alle Bilder sollten die gleichen Abmessungen haben
2) alle Bilder stehen im gleichen Verzeichnis
3) alle Dateibezeichnungen enden mit einer fortlaufenden zweistelligen Zahl von 01 - 12
4) die Grafikformate aller Bilder sind identisch (GIF, JPG, PNG)
Beispiele:
|
images/bild01.gif
|
images/bild02.gif
|
images/bild03.gif
|
...
|
images/bild12.gif
|
|
Grafik01.jpg
|
Grafik02.jpg
|
Grafik03.jpg
|
...
|
Grafik12.jpg
|
|
aufnahme001.jpg
|
aufnahme002.jpg
|
aufnahme003.jpg
|
...
|
aufnahme012.jpg
|
Aufwand
- 12 Grafiken mit identischen Bildmaßen herstellen
- Script in den HEAD-Bereich kopieren
- Anpassungen eintragen
- Grafik im Body mit Attribut id="Monatsbild" notieren
Wenn Ihnen das als Einstieg ausreicht öffnen Sie die Textdatei (oben), kopieren den Code in Ihre Seite und experimentieren weiter.
Verwendete Technik
Um eine monatsabhängige Grafik anzeigen zu lassen, wird hier die JavaScript-interne Funktion getMonth() verwendet. Diese Funktion ermittelt aus einem Datumswert den aktuellen Monatswert.
var VariablenName = DATUMSWERT.getMonth();
JavaScript liefert als Rückgabe einen Zahlenwert von 0 bis 11, abhängig vom derzeitigen Monat. 0 für Januar, 1 für Februar, usw. Mit diesem Zahlenwert arbeite ich in meinem Script. Zur Vereinfachung addiere ich eine 1 hinzu. Dadurch erhalte ich Werte von 1 - 12.
var VariablenName = (DATUMSWERT.getMonth() +1);
Der Rückgabewert wird zur Weiterverarbeitung in eine Variable geschrieben.
URL der Monatsgrafik ermitteln
Die zu Beginn angezeigte Platzhaltergrafik hat eine eindeutige ID. Mittels dieser ID wird das Script die zu tauschende Grafik identifizieren um den Bildtausch einzuleiten.
Die ID ist hier: 'Monatsbild'
Aus dem aktuellen Datum wird der aktuelle Monat ermittelt. Das Ergebnis ist eine Ziffer von '0' bis '11'. Zu diesem Ergebnis wird der Wert '1' addiert. Das neue Ergebnis ist eine Ziffer von '1' bis '12'. Der Wert wird der Variablen 'MonatJetzt01' zugeordnet.
var DatumJetzt01 = new Date();
var MonatJetzt01 = (DatumJetzt01.getMonth()+1);
Aus diesem Zahlenwert wird ein zweistelliger Wert generiert. indem man vor einstelligen Zahlenwert eine Null voranstellt. Der Wert wird der Variablen 'Nummer' zugeordnet.
Nummer = (MonatJetzt01 < 10) ? "0" + MonatJetzt01 : "" + MonatJetzt01;
Aus den Vorgaben für den Pfad + dem ersten Teil der URL der Grafiken (BildURL) und der Vorgabe für die Dateiendung (GIF, JPG, PNG) wird die URL der Monatsgrafik ermittelt. Der Wert wird der Variablen 'BildURL' zugeordnet.
PfadNameTeil = "bilder/aufnahme0"
Dateiendung = ".jpg"
BildURL = PfadNameTeil + Nummer + Dateiendung;
Zuordnung von URL und Titeltext
Der Dateiname des anzuzeigenden Bildes wurde vom Script ermittelt und wird danach dem Seitenelement (der Platzhaltergrafik) mit der ID="Monatsbild" zugeordnet.
document.getElementById("Monatsbild").src = BildURL;
Ich habe das Script um eine Funktion erweitert. Jetzt wird auch der MouseOver-Titeltext für das angezeigte Bild dynamisch erzeugt. Ein Array, der 12 Werte enthält, dient als Ablage für die 12 Texte, die bei MouseOver angezeigt werden. Hier im Beispiel sind dort die Texte für die Monatsbilder abgelegt. Eine Programmzeile des Scripts ordnet dem Bild die 'title-Angaben' abhängig vom aktuellen Monat zu.
document.getElementById("Monatsbild").title= Text;
Abhängig vom Einsatzbereich des Scripts können sie die Eintragungen im Array leer lassen oder um eine treffende Bildbeschreibung ergänzen.
Bildtausch-Script im Head
Die Dateinamen für das Beispiel lauten hier:
|
aufnahme001.jpg
|
aufnahme002.jpg
|
aufnahme003.jpg
|
...
|
aufnahme012.jpg
|
Der erste Teil der Dateinamen, gegebenefalls mit Pfadangaben, werden der Variablen 'PfadNameTeil' zugewiesen. Punkt und Dateiendung sind in der Variablen 'Dateiendung' notiert.
PfadNameTeil = "aufnahme0"
Dateiendung = ".jpg"
Das Script setzt diese Segmente und die ermittelte zweistellige Nummer zu einer gültigen URL zusammen:
<script language="JavaScript" type="text/javascript">
<!--
// ****************** Anpassungen *****************
// hier Dateinameninfo (incl. Pfad) eintragen
// für "aufnahme001.jpg" zum Beispiel "aufnahme0"
// für "fotos/aufnahme001.jpg" zum Beispiel "fotos/aufnahme0"
// letzten beiden Ziffern weglassen
PfadNameTeil = "aufnahme0";
Dateiendung = ".jpg";
// hier Bildtexte eintragen
var Monat=new Array();
Monat[1]="Monatsbild für Januar";
Monat[2]="Monatsbild für Februar";
Monat[3]="Monatsbild für März";
Monat[4]="Monatsbild für April";
Monat[5]="Monatsbild für Mai";
Monat[6]="Monatsbild für Juni";
Monat[7]="Monatsbild für Juli";
Monat[8]="Monatsbild für August";
Monat[9]="Monatsbild für September";
Monat[10]="Monatsbild für Oktober";
Monat[11]="Monatsbild für November";
Monat[12]="Monatsbild für Dezember";
// ***********************************************
var DatumJetzt01 = new Date();
var MonatJetzt01 = (DatumJetzt01.getMonth()+1);
// Monatsnummer immer zweistellig
Nummer = (MonatJetzt01 < 10) ? "0" + MonatJetzt01 : "" + MonatJetzt01;
var Text = "";
var BildURL = "";
function Titeltext (DieserMonatNummmer)
{
return Monat[DieserMonatNummmer];
}
function BildDesMonats01()
{
BildURL = PfadNameTeil + Nummer + Dateiendung;
document.getElementById("Monatsbild").src = BildURL;
Text = Titeltext(MonatJetzt01);
document.getElementById("Monatsbild").title = Text;
}
// Der Aufruf erfolgt nach 1500 Millisekunden
setTimeout('BildDesMonats01()',1500);
//-->
</script>
Die im Script blau markierten Angaben passen sie entsprechend ihrer Dateinamen an:
Erster Teil des Dateinamens ohne zweistellige Zahl und den Grafiktyp.
PfadNameTeil = "aufnahme0"
Dateiendung = ".jpg"
Das Script liefert als Ergebnis für dieses Beispiel:
im Body
Das <img>-Tag für die Grafik wird notiert. Die zu Beginn angezeigte Platzhaltergrafik bekommt eine eindeutige ID. Die ID ist hier: 'Monatsbild'
<img id="Monatsbild" src="platzhalter.jpg" ... >
 Monatsbild 02 (1 von 12) URLs in einem Array
Wochentagsbild 01 - Bild des Wochentags (1 von 7)
Grafik aktuelles Sternzeichen (1 von 12)
|
Home • Bilder • Monatsbild 01
Demo
ZIP Test-Grafiken
