 URL einem Array entnehmen 01 URL einem Wert zuordnen
In meinen Beispielen spreche ich immer wieder von einem Array wenn es darum geht Informationen als 'Datenvorrat' bereit zu halten oder wenn Grafiken vorgeladen werden sollen. Hier werden die URLs für Grafiken in einem Array abgelegt.
|
|
wertabhängig einem Array die Grafik-URL entnehmen
Anzeige graphischer Elemente abhängig von ermittelten Werten. Auswahl der URL durch Zuordnung von Elementen eines Arrays. Das Script lässt sich nach einer Anpassung für die Bilddarstellung bei Statistiken, Spielen, Fotos usw. einsetzen. Die Werteermittlung kann mit einem Zufallsgenerator, datumsabhängig, zeitabhängig oder nach anderen Regeln erfolgen.
Ein komplexeres Beispiel finden Sie unter DIVERSES  Morse-Code
Beispiel: Grafik zur Tageszeit anzeigen
Abhängig von der aktuellen Uhrzeit soll eine entsprechende Grafik angezeigt werden.
Die URLs der Grafiken sind in einem Array abgelegt. Aus der Systemzeit wird ein Wert ermittelt, der den aktuellen Stunden- und Minutenwert repräsentiert. Das geschieht mit einer if-Untersuchung. Entsprechend des Wertes wird die URL für die zugehörige Grafik dem Array entnommen und die Grafik wird angezeigt.
Die 4 Grafiken (Quelle Wikimedia, Autor Jwnabd):
morning
(Morgen) |
afternoon
(Nachmittag) |
evening
(Abend) |
night
(Nacht) |
Einsatzbereiche
Die Anwendung mit Tageszeit-Grafiken ist nur ein Beispiel. Sie könnten das Script auch für die Darstellung und Zuordnung anderer Abhängigkeiten einsetzen.
- Datum | Horoskop Demo
- Ziffern | Noten
- Platzierung | Mannschafts-Trikot
- Wert | Foto
- Jahreszeit | Blumen
- Datum | Obstsorten der Saison
- ...
|
   
     
        
|
Beispiel:
Der Einsatz erscheint durchaus sinnvoll. Auf einer Webseite für eine Gärtnerei oder einen Obsthandel könnte man automatisiert Informationen für saisonal günstig zu erwerbende Verkaufsgüter als Bild anzeigen lassen. Eine häufige Pflege der Webseite würde entfallen und das Angebot erscheint aktualisiert.
BIO-Hof Immendorf
Demo saisonales Foto (Juni)
Wann welches heimische Obst und Gemüse auf den Markt kommt und Sie günstig einkaufen können erfahren Sie auf unserer Webseite. In diesem Monat bieten wir preiswert an:
|
|
Wie wird das umgesetzt
Im Body-Bereich wurde eine Grafik als Platzhalter notiert. Die Grafik bekam eine eindeutige ID (hier: ZeitGrafik). Diese Platzhaltergrafik wird später ausgetauscht.
<img id="ZeitGrafik" src="z-platzhalter.gif" width="100" height="100" border="0" alt="">
Im Script wird ein Register (Array) definiert:
var ImageArr = new Array('z-morgen.gif','z-mittag.gif','z-abend.gif','z-nacht.gif');
Der Array "ImageArr" enthält die URLs der Grafiken.
| Element |
0 |
1 |
2 |
3 |
| Grafik-URL |
"z-morgen.gif" |
"z-mittag.gif" |
"z-abend.gif" |
"z-nacht.gif" |
| entspricht |
|
|
|
|
Abhängig vom später ermittelten Wert wird eines der im Array abgelegten Elemente ausgewählt. Hier ist das die URL einer Grafik. Dem Wert 0 wird der Inhalt des Elements 0, dem Wert 1 wird der Inhalt des Elements 1, usw. zugeordnet.
Berechnen der Werte für dieses Beispiel (Tageszeit-Grafik):
Mit einer if-Untersuchung wird ein Wert in die Variable "Nummer" geschrieben:
Nummer = 3
// bis 21:15 Uhr
if ( ZeitStunde == 21 && ZeitMinute <=14 || ZeitStunde < 21 )
{Nummer = 2;}
// bis 17:30 Uhr
if ( ZeitStunde == 17 && ZeitMinute <=29 || ZeitStunde < 17)
{Nummer = 1;}
// bis 12:00 Uhr
if ( ZeitStunde <= 11 )
{Nummer = 0;}
Ist dann z.B. der Wert von "Nummer" eine "1", wird die Grafik für Nachmittag angezeigt. Dazu wird die URL für den Platzhalter mit der id "ZeitGrafik" gegen die aus dem Array entnommene URL-Info ausgetauscht.
document.getElementById("ZeitGrafik").src = ImageArr[Nummer];
Wie Sie bemerken frage ich die Nachtzeit (21:15 - 24 Uhr) nicht gesondert ab. Ich erspare mir diese Arbeit indem ich den Wert für 'Nummer' vorab auf '3' gesetzt habe (Nacht). Sind dann die 3 if-Abfragen nicht gültig, bleibt der Wert unverändert. Es ist Nachtzeit!
 Arrays - Grundlagen 01
Arrays - Grundlagen 02
Arrays - Werte zuweisen und auslesen (Beispiel mit Namen, Zahlen, Automarken)
Arrays - Elemente ändern und prüfen - Datenanalyse visualisieren
Arrays - Werte zuweisen und auslesen - Dateinamen Monatsbild 02
Arrays - Textzeichen bestimmten Array-Elementen zuordnen
Arrays - Werte zuweisen und auslesen - Text in Morsecode-Grafiken
Module mit Arrays - Monatsbild 01 (1 von 12)
Module mit Arrays - Wochentagsbild 01 - Bild des Wochentags (1 von 7)
Module mit Arrays - Grafik aktuelles Sternzeichen (1 von 12)
|
Home • JavaScript • URL zuordnen - Array
Download
aktuelle Grafik hier anzeigen