zufälliger Bildwechsel bei neu laden der seite
Bernd
- javascript
Hallo,
ich habe auf einer Seite ein Bild das bei jedem neuen Aufruf der Seite (oder "aktualisieren") ausgetauscht werden soll. Es gibt 11 weitere Bilder die in einem Ordner liegen. Aus diesem Ordner soll das neue (zufällige) Bild geladen werden.
Dafür müsste es doch schon ein vorgefertiges Script geben, sooft wie man es auf anderen Seiten schon gesehen hat.
Ich hoffe ihr könnt mir helfen.
Vielen Dank schonmal...
ich habe auf einer Seite ein Bild das bei jedem neuen Aufruf der Seite (oder "aktualisieren") ausgetauscht werden soll. Es gibt 11 weitere Bilder die in einem Ordner liegen. Aus diesem Ordner soll das neue (zufällige) Bild geladen werden.
einfacher geht das mit enem Serverseitigen Skript. Aber man kan das auch mit JS lösen. Was hast du den versucht?
Dafür müsste es doch schon ein vorgefertiges Script geben, sooft wie man es auf anderen Seiten schon gesehen hat.
In der Regel ist dies wohl in einem CGI Skript eingebaut.
Struppi.
Hi Struppi,
probier's mal mit folgendem Script:
LG, piranja
<html>
<head>
<script type="text/javascript">
<!--
function zufall(range) {
return Math.ceil(Math.random() * 1000) % range + 1;
}
function zufallsbild() {
var Wert = zufall(12);
document.Bild.src = "bild" + Wert + ".src";
}
bild1 = new Image();
bild1.src = "Bild1.gif";
//... usw ...
bild12 = new Image();
bild12.src = "Bild12.gif";
//-->
</script>
</head>
<body onload="zufallsbild();">
<img name="Bild">
</body>
</html>
Hallo,
ich habe auf einer Seite ein Bild das bei jedem neuen Aufruf der Seite (oder "aktualisieren") ausgetauscht werden soll. Es gibt 11 weitere Bilder die in einem Ordner liegen. Aus diesem Ordner soll das neue (zufällige) Bild geladen werden.Dafür müsste es doch schon ein vorgefertiges Script geben, sooft wie man es auf anderen Seiten schon gesehen hat.
Ich hoffe ihr könnt mir helfen.
Vielen Dank schonmal...
Hi Struppi,
Ich?
probier's mal mit folgendem Script:
Besser nicht.
function zufallsbild() {
var Wert = zufall(12);
document.Bild.src = "bild" + Wert + ".src";
Du hast wahrscheinlich hier ein eval vergessen, aber so würd ich's sowieso nicht machen, da eval eigentlich nie nötig ist und auch nicht besonders elegant ist.
}
bild1 = new Image();
bild1.src = "Bild1.gif";//... usw ...
bild12 = new Image();
bild12.src = "Bild12.gif";
Du kennst Arrays?
Aber warum soll man 12 Bilder vorladen um eins anzuzeigen?
Struppi.
Wie würdest Du es machen?
Von Arrays habe ich auch mal was gehört.
Bilder müssen generell nicht vorgeladen werden, da die Anzeige ja zufällig geschieht.
Hättest Du einen Verbesserungsvorschlag?
Hi Struppi,
Ich?
probier's mal mit folgendem Script:
Besser nicht.
function zufallsbild() {
var Wert = zufall(12);
document.Bild.src = "bild" + Wert + ".src";Du hast wahrscheinlich hier ein eval vergessen, aber so würd ich's sowieso nicht machen, da eval eigentlich nie nötig ist und auch nicht besonders elegant ist.
}
bild1 = new Image();
bild1.src = "Bild1.gif";//... usw ...
bild12 = new Image();
bild12.src = "Bild12.gif";Du kennst Arrays?
Aber warum soll man 12 Bilder vorladen um eins anzuzeigen?
Struppi.
Wie würdest Du es machen?
Von Arrays habe ich auch mal was gehört.
Bilder müssen generell nicht vorgeladen werden, da die Anzeige ja zufällig geschieht.Hättest Du einen Verbesserungsvorschlag?
Wie gesagt das sinnvollste ist ein CGI Skript, das kann das Verzeichniss lesen. Ansonsten nimmst du ein Array mit den URLs der Bilder und gibst an der Stelle wo das Bild erscheinen soll den HTML Tag per document.write aus.
Struppi.
hi,
Wie würdest Du es machen?
jedenfalls nicht mit einem sinnlosen fullquote.
bitte zitiere _sinnvoll_, danke. </faq/#Q-09a>
gruss,
wahsaga
häää???
nix verstehen!
hi,
Wie würdest Du es machen?
jedenfalls nicht mit einem sinnlosen fullquote.
bitte zitiere _sinnvoll_, danke. </faq/#Q-09a>
gruss,
wahsaga
hi,
bitte zitiere _sinnvoll_, danke. </faq/#Q-09a>
häää???
nix verstehen!
gruss,
wahsaga
achso,
bin hier das erste Mal. habe den zitaten eigentlich keine nähere Aufmerksamkeit geschenkt.
Ja, sorry, hatte Bernd gemeint.
Mit Arrays hast du natürlich Recht!
Also folgende Änderung:
function zufallsbild() {
var Wert = zufall(12);
document.Bild.src = Bilder[Wert-1];
}
Bilder = new Array();
Bilder = new Array(12);
Bilder = new Array("Bild1.gif","Bild2.gif",... );
Hab's getestet - und es funktioniert. Ich könnte mit dieser Lösung gut leben, auch wenn es vielleicht Eleganteres gibt ... ;-)
LG, piranja
Hi Struppi,
Ich?
probier's mal mit folgendem Script:
Besser nicht.
function zufallsbild() {
var Wert = zufall(12);
document.Bild.src = "bild" + Wert + ".src";Du hast wahrscheinlich hier ein eval vergessen, aber so würd ich's sowieso nicht machen, da eval eigentlich nie nötig ist und auch nicht besonders elegant ist.
}
bild1 = new Image();
bild1.src = "Bild1.gif";//... usw ...
bild12 = new Image();
bild12.src = "Bild12.gif";Du kennst Arrays?
Aber warum soll man 12 Bilder vorladen um eins anzuzeigen?
Struppi.
Hallo,
also bei mir funktioniert das nicht so richtig, aber ich bin auch der "JavaScript-Vollhorst".
Kannst Du mal bitte schauen warum das net geht?!?
Hier ist der Link
http://www.smashbach.de/carisma
Hi,
also, in deinem Arry ist hinten ein Komma zuviel. Außerdem sind nur 6 Bilder drin. Es ist aber für 12 Bilder deklariert, und der Zufallsgenerator wird auch mit 12 aufgerufen. Also, entweder noch 6 Bilder dazu oder die beiden "12"-Angaben auf "6" ändern. Und auf jeden Fall das letzte Komma weg ...
LG, piranja
Hallo,
also bei mir funktioniert das nicht so richtig, aber ich bin auch der "JavaScript-Vollhorst".
Kannst Du mal bitte schauen warum das net geht?!?
Hier ist der Linkhttp://www.smashbach.de/carisma
http://www.smashbach.de/carisma
function zufall() {
return Math.ceil(Math.random() * 1000) % range + 1;
}
hier fehlt hier der Parameter range außerdem ist die Funktion eh nicht so ganz das gelbe, da sie nicht das liefert was du willst.
Du willst zufällige Werte zwischen 0 und einem Höchstwert
function zufall(range) {
return parseInt(Math.random() * range + 1);
}
Die Deklaration des Arrays kannst ruhig in die Funktion packen (es reicht dazu eine Zeile) außerdem kannst du die Länge des Arrays verwenden um den Bereich der Zufallszahl zu bestimmen.
function zufallsbild() {
Bilder = new Array("bilder/randompics/Bild1.jpg","bilder/randompics/Bild2.jpg","bilder/randompics/Bild3.jpg","bilder/randompics/Bild4.jpg","bilder/randompics/Bild5.jpg","bilder/randompics/Bild6.jpg");
var Wert = zufall(Bilder.length);
document.Bild.src = Bilder[Wert];
}
Struppi.
Danke schonmal...
Es funktioniert eigentlich sehr gut, bis auf zwei Kleinigkeiten:
1. Es wird immer zuerst das "Bild1.jpg" geladen und dann erst das "Zufallsbild". Sieht beim neuladen etwas komisch aus.
2. Manchmal erscheint ein leeres Bild, wie auf ein nicht vorhandenes Bild verwiesen.
Kannst Du/Ihr bitte nochmal drüberschauen ?
Hier ist der Link:
http://www.smashbach.de/carisma
- Es wird immer zuerst das "Bild1.jpg" geladen und dann erst das "Zufallsbild". Sieht beim neuladen etwas komisch aus.
Klar. Du gibst im HTML-Code bei dem img-Tag ja die Quelle "Bild1.jpg" an. Lass die "src"-Eigenschaft hier einfach weg.
- Manchmal erscheint ein leeres Bild, wie auf ein nicht vorhandenes Bild verwiesen.
var Wert = zufall(Bilder.length);
document.Bild.src = Bilder[Wert];
nimm hier
document.Bild.src = Bilder[Wert-1];
das erste Element im Array ist meines Wissens 0 und nicht 1, oder?
LG, piranja
- Manchmal erscheint ein leeres Bild, wie auf ein nicht vorhandenes Bild verwiesen.
var Wert = zufall(Bilder.length);
document.Bild.src = Bilder[Wert];nimm hier
document.Bild.src = Bilder[Wert-1];
das erste Element im Array ist meines Wissens 0 und nicht 1, oder?
ups, ich sehe gerade im Thread weiter unten, dass Struppi den Zufallsgenerator so umgemodelt hat, dass er jetzt nicht mehr Zahlen von 1 - max, sondern von 0 - max ausgibt. Dann weiß ich's auch nicht, sorry.
Allerdings solltest du die doppelten Codeschnipsel mal aus deinem Code entfernen.
LG, piranja
- Es wird immer zuerst das "Bild1.jpg" geladen und dann erst das "Zufallsbild". Sieht beim neuladen etwas komisch aus.
Sinnvoll wäre den img Tag per Javascript in das Dokument zu schreiben (noscript Teil dann aber nicht vergessen)
- Manchmal erscheint ein leeres Bild, wie auf ein nicht vorhandenes Bild verwiesen.
Ich glaub die Zufallsfunktion ist immer noch nicht so super gewesen, so müßte es gehen:
function zufall(range)
{
return parseInt(Math.random() * range );
}
Wobei sie jetzt den Bereich 0 bis range-1 zurückgibt, was in diesem Fall gewünscht ist, da der letzte Index eines Arrays length-1 ist.
Struppi.
hallo,
wie schon erwähnt ist JavaScript nicht gerade meine Stärke.
Kannst Du Dir bitte nochmal das Script auf
http://www.smashbach.de/carisma anschauen und ggf. abändern?
Das Problem ist nämlich das manchmal ein leeres Bild kommt.
Gracias.
wie schon erwähnt ist JavaScript nicht gerade meine Stärke.
Kannst Du Dir bitte nochmal das Script auf
http://www.smashbach.de/carisma anschauen und ggf. abändern?
Das ist ja jetzt ein Riesen durcheinander. du hast zweimal die Funktion zufall und keinmal davon ist die richtige. Les einfach nochmal durch was ich zuletzt schrieb und verwende es so in dem Skript.
Struppi.
hi,
function zufallsbild() {
var Wert = zufall(12);
document.Bild.src = "bild" + Wert + ".src";Du hast wahrscheinlich hier ein eval vergessen,
ich denke nicht.
die src-eigenschaft eines bildes beinhaltet einen einfachen string, und dieser wird hier mit dem stringverkettungsoperator + von javascript erzeugt.
warum sollte hier ein eval() nötig sein? ich denke, das ist hier absolut nicht nötig.
(und die konversion der zahl in Wert in einen string macht JS bei dieser kombination ja auch automatisch.)
gruss,
wahsaga
function zufallsbild() {
var Wert = zufall(12);
document.Bild.src = "bild" + Wert + ".src";Du hast wahrscheinlich hier ein eval vergessen,
ich denke nicht.
die src-eigenschaft eines bildes beinhaltet einen einfachen string, und dieser wird hier mit dem stringverkettungsoperator + von javascript erzeugt.
warum sollte hier ein eval() nötig sein? ich denke, das ist hier absolut nicht nötig.
Er weist dort oben einer Bildquelle den String: "bildX.src" zu und das ist nicht was er wollte, die Quelle des Objektes bildX und die meisten Skripte verwenden dafür unnötigerweise eval, es würde aber auch window['bild' + Wert].src gehen ein Array wäre aber besser.
Struppi.
hi,
Er weist dort oben einer Bildquelle den String: "bildX.src" zu und das ist nicht was er wollte
*andenkopfklatsch*
hast recht. ich hatte das .src vollkommen überlesen, und für ein .jpg o.ä. gehalten, also das ganze für einen einfachen _dateinamen_ eines bildes angesehen.
gruss,
wahsaga