 Zufallsgrafik anzeigen (simpel)
Ein Zufallsbild wird beim Öffnen der Seite in ihrem HTML-Dokument angezeigt. Sie bestimmen eine Sammlung von Bildern oder Grafiken. Aus dieser Sammlung wird eines von x eingetragenen Bildern zufällig ausgewählt und angezeigt. |
|
Zufallsgrafik beim Öffnen der Seite anzeigen
Sie können ein Banner, ein Foto oder ein Clipart-Image anzeigen lassen. Ihre Seite erscheint also beim Aufbau jedesmal in einer zufälligen Konfiguration für die Bildansicht. Das bringt ein wenig Abwechslung und gibt ihrer Seite einen interessanten Anstrich.
|
Gleich beim Laden der Seite wird eine Zufallsgrafik bestimmt und angezeigt. Die Grafik wird von einem JavaScript aus der von Ihnen bereitgestellten Sammlung von Grafiken zufällig ausgewählt. |
Aufwand zum Einbau in ihre Seiten:
Im Head-Bereich des HTML-Dokuments
- JavaScript im Head-Bereich ihrer HTML-Datei notieren
- Funktionsaufruf im Body-Bereich notieren
- Breite und Höhe der Grafik eintragen
- URL der Zufallsgrafiken eintragen
- Randformatierung im CSS-Block festlegen
Im Body-Bereich des HTML-Dokuments
Der Javascript-Funktionsaufruf wird in ihrer HTML-Seite an der Stelle notiert, wo die Grafik angezeigt werden soll.
<script type="text/javascript" language="JavaScript">
<!--
ZufallsBildStart()
//-->
</script>
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
Funktion
Die Abmessungen für das Bild wurden von Ihnen festgelegt und die URLs der Grafiken in einem Array notiert. Dateiname (+Pfad) für jedes Bild wurde eingtragen.
// hier die Abmessungen eintragen
ZufallBreite = 150;
ZufallHoehe = 113;
ImageArr = new Array()
// hier die Grafiken eintragen
ImageArr[ImageArr.length] = "images/foto01.jpg";
ImageArr[ImageArr.length] = "images/foto02.jpg";
ImageArr[ImageArr.length] = "images/foto03.jpg";
ImageArr[ImageArr.length] = "images/foto04.jpg";
ImageArr[ImageArr.length] = "images/vogel06.jpg";
ImageArr[ImageArr.length] = "images/vogel20.jpg";
...
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).
Was geschiet eim Laden der Seite?
Beim Laden der Seitewird eine Zufallszahl ermittelt. Dann schreibt die Funktion 'ZufallsBildStart()' die HTML-Tags für das Image in die Seite. Der Dateiname wird dabei jedesmal vom Script zufällig ermittelt.
Das wird vom Script in die HTML-Seite geschrieben:
<img src="Dateiname" width="150" height="113" border="0" alt="">
Die Anzahl der eingetragenen Bild-URLs im Register (Array 'ImageArr') wird automatisch ermittelt.
Eine Zufallszahl mit einem Wert zwischen 0 und der Anzahl der eingetragenen Bilder wird ermittelt. Abhängig von der Zufallszahl wird der Dateiname ausgewählt. Das Script organisiert also die zufällige Auswahl und fügt die ermittelte Bildquelle (Bild-URL) in die Schreibanweisung für das Image-Tag (<img>) ein.
| 
Home • Bilder • CSS • Zufallsgrafik
Quellcode
