« Einfach + Gut | Home | Patent für schnellen Zugang zu Notrufinformationen »

20.04.05

HTML-Tipp: Zufallsbild

Einigen aufmerksamen Lesern ist aufgefallen, dass das Titelbild auf den Seiten unserer Feuerwehr ein Zufallsbild ist (einfach mal die Seite laufend neu laden, dann seht ihr es schon). Gut gesehen! Für die eigene Website lässt sich dieses Feature problemlos einbinden. Das geht folgendermassen:

Zuerst die gewünschte Anzahl Bilder (bis zu 10) im gleichen Format - denn sie sollen immer an die gleiche Stelle erscheinen - im gleichen Ordner auf dem Server ablegen. Der Dateiname muss immer gleich sein, aber mit einer anderen Zahl enden. Bei uns ist das "random1.jpg" bis "random0.jpg".
Der Name ist egal solange er im Script berücksichtigt wird.

Dann folgenden Code in den <head> einfügen:

<script language="JavaScript" type="text/javascript">
// This script was supplied free by Hypergurl
// http://www.hypergurl.com
<!--
// JavaScript to interpolate random images into a page.
var ic = 10; // Number of alternative images
var xoxo = new Array(ic); // Array to hold filenames

xoxo[0] = "images/random/random1.jpg";
xoxo[1] = "images/random/random2.jpg";
xoxo[2] = "images/random/random3.jpg";
xoxo[3] = "images/random/random4.jpg";
xoxo[4] = "images/random/random5.jpg";
xoxo[5] = "images/random/random6.jpg";
xoxo[6] = "images/random/random7.jpg";
xoxo[7] = "images/random/random8.jpg";
xoxo[8] = "images/random/random9.jpg";
xoxo[9] = "images/random/random0.jpg";


function pickRandom(range) {
if (Math.random)
return Math.round(Math.random() * (range-1));
else {
var now = new Date();
return (now.getTime() / 1000) % range;
}
}
// Write out an IMG tag, using a randomly-chosen image name.
var choice = pickRandom(ic);
// -->
</script>

Wobei der (in diesem Fall relative) Pfad zu den Bilddateien zu berücksichtigen ist:

images/random/random0.jpg einfach mit Eurem Pfad und Dateinamen ersetzen.

Im <body> wird das Bild an der gewünschten Stelle folgendermassen eingesetzt:

<SCRIPT LANGUAGE="JavaScript">document.writeln('<TD'+'><IMG SRC="'+xoxo[choice]+'" HEIGHT=60 WIDTH=600 BORDER=0 ><'+'/TD>');</SCRIPT>

Wenn's nicht in einer Tabelle sein soll, dann entfallen (meine ich) die <TD'+'> und <'+'/TD>') -Tags.

Einfach ausprobieren - ist nicht viel Arbeit und peppt eine Website ungemein auf. Notfalls den Source Code von unserer Homepage runterladen und entsprechend zweckentfremden.

Geschrieben von Irakli um 20.04.05 18:41

Trackback Pings

TrackBack URL für diesen Beitrag
http://www.rakeman.net/mt-tb.cgi/460

Kommentare

Das beste daran: HTML-Tipp: Und was ist es? JavaScript!

Geschrieben von: HTML-Freak um 20.04.05 22:07

Wenn man eine dynamische Seite mit z.B. PHP betreibt kann man das auch direkt über PHP machen. Das ist eleganter, da serverseitig. Mit JavaScript sollte man eher etwas vorsichtiger sein , da es clientseitig ausgeführt wird.

Geschrieben von: Carsten um 19.11.05 21:53

wow vielen dank, genau danach habe ich gesucht!! ich werde es gleich mal ausprobieren.

Geschrieben von: ZuN um 16.08.06 12:53

juhu das hab ich hinbekommen. weißt du vielleicht noch wie ich innerhalb des codes den banner rechtsbündig anordnen kann?

Geschrieben von: ZuN um 16.08.06 13:10

Kommentar hinzufügen




Remember Me?

(HTML erlaubt)

kostenloser Counter