 Zufallsgrafik + Text - 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
 06.09.2008 22:00 Uhr, JavaScript überarbeitet - (Zuweisung der Werte für Arrays)
Sie können ein Banner, ein Foto oder ein Clipart-Image anzeigen lassen. Das hängt natürlich vom Einsatzberich dies Scripts ab. Die Textfarbe können sie 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
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>
Funktion
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 eingteragen.
(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 das Dokument.
Zur Anpassung folgende Änderungen im Script:
| Element |
Variable |
hier im Beispiel |
Eintrag |
| Bildadresse URL |
banner_url |
b03-280x60.gif |
Pfad/Dateiname |
| Textfarbe |
text_farbe |
#007FFF |
ihre Farbangabe |
| Beschreibungstext |
bild_text |
Interessantes über ... |
ihr Text |
|
WWW.WEB-TOOLBOX.NET
Quellcode 
ZURÜCK