 Zufallsgrafik + Beschreibungstext - Version 02 (Array)
Hier wird eines von x eingetragenen Bildern zufällig ausgewählt und angezeigt. Zusätzlich wird der passende Begleittext in der voreingestellten Farbe, unterhalb der Grafik angezeigt. |
|
Version 02: Ablage der Werte in Arrays
 JavaScript überarbeitet - Ablage der der zugehörigen Werte in 3 Arrays
Sie können ein Banner, ein Foto oder ein Clipart-Image anzeigen lassen. Das hängt natürlich vom Einsatzberich dieses Scripts ab. Die Textfarbe kann für jedes Bild separat, passend zur vorrangigen Farbe der Grafik festlegen.
Unterhalb des Bildes wird der Begleittext in voreingestellter Farbe angezeigt !
Zum Testen klicken Sie auf Reload
Aufwand zum Einbau in ihre Seiten:
- JavaScript im Head-Bereich ihrer HTML-Datei notieren
- Aufruf der Funktion im Body-Bereich notieren
- URLs der Grafiken anpassen
- zugehörige Texte eintragen
- jeweilige Textfarbe festlegen
Bitte entnehmen Sie den gesamten Quellcode für dieses Beispiel der Textdatei (Link oben im Kopfbereich). Dort können Sie ebenfalls eine Demo- bzw. eine Beispieldatei abrufen. Infos und Erklärungen zum 'Einbauen' von JavaScript  JavaScript Menü 01
Aufruf der Funktion im Body-Bereich
Die Grafik mit Beschreibungstext wird in ihrer HTML-Seite an der Stelle angezeigt, wo sie den Aufruf der Funktion 'BildPlusText04()' notieren.
<script type="text/javascript" language="JavaScript">
<!--
BildPlusText04();
//-->
</script>
Ablage der Informationen im Script
Für jede Darstellung werden 3 Angaben benötigt: Grafik-URL, Text, Textfarbe.
Die Werte der 3 Angaben für Grafik-URL, Text und Textfarbe werden bei diesem Beispiel in 3 Arrays eingtragen: ImageArr[], TextArr[] und FarbArr[].
Im ersten Array findet das Script die URLs für die Grafiken. Im zweiten Array findet das Script die zugehörigen Texte. Im dritten Array findet das Script die Farbwerte für die Texte.
Die Infos werden in dieser Form abgelegt (Auszug):
...
ImageArr[ImageArr.length] = "images/foto01.jpg";
TextArr[TextArr.length] = "Untertitel-Text 01";
FarbArr[FarbArr.length] = "#427BD6";
ImageArr[ImageArr.length] = "images/foto02.jpg";
TextArr[TextArr.length] = "Untertitel-Text 02";
FarbArr[FarbArr.length] = "#427BD6";
...
Nach diesem Schema können sie weitere Eintragungen notieren. Ich habe diese Art der Zuweisung für die Array-Elemente gewählt weil sie weniger fehlerträchtig ist (Element-Nummern müssen nicht eingetragen werden).
Die Anzahl der Bilder (Anzahl der Eintragungen) wird automatisch ermittelt.
Eine Zufallszahl 'Zufall04' mit einem Wert zwischen 0 und der Anzahl der Arrayelemente -1 wird ermittelt. Abhängig von der Zufallszahl werden die Werte in den Arrays ausgewählt und die JavaScript-Screibanweisung eingebunden. Das Script schreibt die HTML-Tags für die Grafik und den Text (in zugewiesener farbe) in das Dokument.
Für die Einträge im Script:
| Element |
Arrayname |
Beispiel |
Eintrag |
| Bildadresse URL |
ImageArr |
images/foto01.jpg |
Pfad/Dateiname |
| Beschreibungstext |
TextArr |
Untertitel-Text 01 |
ihr Text |
| Textfarbe |
FarbArr |
#427BD6 |
ihr Text |
Formatierung für den Bildrand - Beispiele
8 Pixel solider Randbalken dunkelgrau
<style type="text/css">
<!--
.Bildrand {
border: 8px solid #2F2F2F;
}
-->
</style>
kein Rand
<style type="text/css">
<!--
.Bildrand {
border: none;
}
-->
</style>
ähnliche Themen
 Zufallsgrafik beim Öffnen der Seite anzeigen
Zufallsgrafik ersetzt Startgrafik nach x Sekunden
Zufallsgrafik als Link - eine von X Grafiken
Zufallsgrafik mit zugehörigem Text 01
uhrzeitabhängige Bildanzeige Tag / Nacht - Version 02
|
Home • Bilder • Zufallsgrafik
Quellcode