 Monatsbild 02 - Array (Array-Elemente zuordnen)
Hier erkläre ich wie Dateinamen in einem Array abgelegt werden, auf die man dann mit einer JavaScript-Funktion gezielt zugreifen kann. Der Dateinamme für das aktuelles Monatsbild soll dem Array entnommen und die entsprechende Grafik angezeigt werden.
|
|
URL für eine Grafik aus einem Array entnehmen
Beispiel einer Anwendung: Monatsabhängig soll ein bestimmtes Foto angezeigt werden.
 Vorteil hier: Die Dateinamen können frei festgelegt werden und müssen keinem System entsprechen. Sie müssen auch nicht wie im Beispiel  Monatsbild 01 im gleichen Ordner abgelegt sein. Dateiname und Pfad können frei gewählt werden!
a gerade ermittelte Daten
|
|
b erzeugte Anzeige
 |
Die 12 Datenquellen (URLs) der Grafiken werden in einem Array (Register) mit dem Namen 'bildarray' abgelegt. Entsprechend der Anzahl der Monate innerhalb eines Jahres sind 12 Grafiken erforderlich und 12 URLs hinterlegt. Beispiel:
Register: Bildarray
| Index-Nr. |
0 |
1 |
2 |
3 |
... |
10 |
11 |
| Wert: |
"jan.gif" |
"bild2.gif" |
"teich.jpg" |
"blume4.jpg" |
... |
"nov.gif" |
"dec.gif" |
Erklärungen
Im Body gibt es eine Platzhaltergrafik, die mit JavaScript gegen das aktuelle Monatsfoto ausgetauscht wird. Das geschieht entweder über das Attribut 'id' oder das Attribut 'name'. Dazu muss der Grafik entsprechend eine ID oder ein Name zugeordnet werden. Ich verwende hier das Attribut ' id="Monatsbild" '. Über diese ID kann ich mit JavaScript-Anweisungen die Grafik gezielt ansprechen.
HTML-Code für die Platzhaltergrafik / das Image / das Bild
<img id="Monatsbild" src="platzhalter.gif" ... >
12 Grafiken halte ich für die monatlich unterschiedliche Anzeige bereit.
Die URLs der 12 Grafiken sind in einem Array (Register) abgelegt. JavaScript ermittelt aus dem Date-Objekt den aktuellen Monat und speichert den Wert (eine Zahl) in einer Variablen ab. Über diese Zahl kann die entsprechende Bildquelle (URL) zugeordnet werden. Dazu entnimmt eine Script-Anweisung dem Array die URL für das aktuelle Bild.
Die URLs der Grafiken wurden in einem Array abgelegt. Jede "Schublade" des Arrays enthält die Information für die Datenquelle einer Grafik.
| Index-Nr. |
0 |
1 |
2 |
3 |
... |
10 |
11 |
| bildarray |
"jan.gif" |
"feb.gif" |
"mar.gif" |
"apr.gif" |
... |
"nov.gif" |
"dec.gif" |
So arbeitet das JavaScript
Zuerst definiere ich einen Array, der die 12 URLs enthält:
bildarray = new Array('jan.gif','feb.gif','mar.gif', ... ,'dec.gif');
Dann ermittle ich aus dem Systemdatum einen Wert, der dem aktuellen Monat entspricht. Diesen Wert schreibe ich in die Variable 'monat':
var today = new Date();
var monat = today.getMonth();
Die Funktion 'MonatsGrafik()' zur Anzeige der Monatsgrafik verwendet diesen Wert:
function MonatsGrafik()
{
document.getElementById("Monatsbild").src = bildarray[monat];
}
Die Anweisung bedeutet:
Ersetze in diesem Dokument die Quellenangabe für das Objekt mit der ID 'Monatsbild' mit dem, was im Array mit der Bezeichnung 'bildarray' in der Schublade mit der Nummer zu finden ist, was als Wert in der Variablen 'monat' gespeichert wurde.
Die Variable 'monat' enthält eine Zahl (Monatszahl) also das, was durch das Script ermittelt und in der Variablen 'monat' abgelegt wurde. Diese Zahl wird als Indexnummer eingesetzt. Sie kennen die Anweisung den Wert eines bestimmten Array-Elements zu ermitteln:
bildarray[Indexnummer];
Der Austausch der Grafik funktioniert hier mittels SRC-Zuweisung, auf der gleichen Basis wie beim Image-Change / MouseOver. (Siehe MouseOver-Erklärung)
Die Variable 'monat' enthält den Wert aus der Ermittlung der Monatszahl. Für Januar ergibt die Berechnung '0' , für Februar '1', usw. (Beginn mit Null).
Quelltext
Script im HEAD-Bereich
<script type="text/javascript" language="JavaScript">
<!-- Begin
// Array mit den Dateinamen
bildarray = new Array(
"fotos/aufnahme001.jpg",
"fotos/wolken.jpg",
"tiere/fische.jpg",
"pflanzen/klee.jpg",
"fotos/aufnahme005.jpg",
"fotos/aufnahme006.jpg",
"fotos2010/boot.jpg",
"fotos/wolken02.jpg",
"technik/hochspannung.jpg",
"fotos/bahnhof.jpg",
"fotos/aufnahme011.jpg",
"fotos/kerzen.jpg");
// Monatsnummer ermitteln
var today = new Date();
var monat = today.getMonth();
// Funktion zum Austausch der Grafik
function MonatsGrafik()
{
document.getElementById("Monatsbild").src = bildarray[monat];
}
// Der Aufruf erfolgt nach 1000 Millisekunden
setTimeout('MonatsGrafik()',1000);
// End -->
</script>
Platzhaltergrafik im Body
<img id="Monatsbild" src="transpixel.gif" width="200" height="150" ... >
 Monatsbild 01 (1 von 12)
Wochentagsbild 01 - Bild des Wochentags (1 von 7)
Grafik aktuelles Sternzeichen (1 von 12)
|
Home • JavaScript • Bilder Monatsbild 02
Demo
ZIP Test-Grafiken
