Zufallsbild und Text
    
 HomeBilder • Zufallsgrafik Quellcode 

 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






22.08.2002   

NACH OBEN