 Monatsbild 01 (1 von 12)
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 monatsabhängig anzeigen
 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
|
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">
<!--
var DatumJetzt01 = new Date();
var MonatJetzt01 = (DatumJetzt01.getMonth()+1);
// Monatsnummer zweistellig
Nummer = (MonatJetzt01 < 10) ? "0" + MonatJetzt01 : "" + MonatJetzt01;
var Text = "";
var BildURL = "";
var Monat=new Array();
Monat[1]="Text für Januar";
Monat[2]="Text für Februar";
Monat[3]="Text für März";
Monat[4]="Text für April";
Monat[5]="Text für Mai";
Monat[6]="Text für Juni";
Monat[7]="Text für Juli";
Monat[8]="Text für August";
Monat[9]="Text für September";
Monat[10]="Text für Oktober";
Monat[11]="Text für November";
Monat[12]="Text für Dezember";
function Titeltext (DieserMonatNummmer)
{
return Monat[DieserMonatNummmer];
}
function BildDesMonats01()
{
PfadNameTeil = "aufnahme0"
Dateiendung = ".jpg"
BildURL = PfadNameTeil + Nummer + Dateiendung;
document.getElementById("Monatsbild").src = BildURL;
Text = Titeltext(MonatJetzt01);
document.getElementById("Monatsbild").title = Text;
}
//-->
</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" ... >
Unterhalb der Notierung der HTML-Anweisungen für die Platzhaltergrafik notiere ich die JavaScript-Anweisung.
Die Funktion BildDesMonats01() wird aufgerufen:
<script language="JavaScript" type="text/javascript">
<!--
BildDesMonats01();
//-->
</script>
| 
HOME
QuellCode 
ZURÜCK