Bild zufällig tauschen

_Ludvik_ · 10.02.2009

Hallo Freunde

Ich habe eine Seite mit 3 Bildern.
Wie erreiche ich, dass nach 2 Sekunden eines der 3 Bilder gegen ein zufälliges Bild ausgetauscht wird, nach weiteren 2 Sekunden ein anderes der 3 Bilder etc..

Habe ein Javascript gefunden, welches mir schon mal ein Bild zufällig wechselt:

<img src="bilder/random1/random1.jpg" width="250" height="167"border="0" alt="" id="bild"> </img>
<img src="bilder/random2/random1.jpg" width="250" height="167"border="0" alt="" id="bild2"> </img>
<img src="bilder/random3/random1.jpg" width="250" height="167"border="0" alt="" id="bild3"> </img>
<script type="text/javascript">
function bildwechsel(bildnr) {

if(bildnr=="3") {
var bildnr = "0";
window.setTimeout("bildwechsel("+bildnr+")",2000);
}
else {
bildnr++;
document.getElementById('bild3').src="bilder/random3/random"+bildnr+".jpg";
window.setTimeout("bildwechsel("+bildnr+")",2000);
}
}
var bildnr = "0";
bildwechsel(bildnr);
</script>

Ist diese Methode überhaupt Sinnvoll?
Wie erreiche ich jetzt dass jedesmal ein anderes der 3 Bilder wechselt??

Gruss _Ludvik_

jaws262 · 10.02.2009

AW: Bild zufällig tauschen

Hallo Ludvik!

Nur damit ich das richtig verstanden habe:

Du hast auf deiner Seite drei Bilder platziert - nennen wir die Positionen der drei Bilder mal "A", "B" und "C" und du hast für diese Positionen verschiedene Motive, z.B. "1", "2", "3" usw.
Und jetzt möchtest du, dass alle 2 Sekunden eine der drei Positionen (welche das ist, soll der Zufall entscheiden) das Motiv wechselt. Und das ganze so, dass natürlich nicht zweimal hintereinander dieselbe Position wechselt und nebenbei sollte dann natürlich auch keinesfalls das gleiche Motiv zweimal auftauchen.

Erste Frage: Hab ich das so richtig kapiert?
Zweite Frage: Welche "Mittel" kannst du nutzen? Nur Javascript? DHTML? Flash? PHP?

LG

_Ludvik_ · 10.02.2009

AW: Bild zufällig tauschen

Genau so

Nutzen könnte ich Javascript sowie PHP.
DHTML kenn ich ehrlich gesagt gar nicht.. :uhm:

stroyer · 10.02.2009

AW: Bild zufällig tauschen

du brauchst aber für die Positionen A,B und C mindestens vier Bilder.
Und selbst da muss es dann so sein, dass wenn ein Bild verschwindet, es beim nächsten Wechsel an einer anderen position auftaucht.
So meine Frage: In welcher Größenordnung liegt die Anzahl deiner verfügbaren Bilder?

_Ludvik_ · 10.02.2009

AW: Bild zufällig tauschen

stroyer schrieb:
du brauchst aber für die Positionen A,B und C mindestens vier Bilder.
Und selbst da muss es dann so sein, dass wenn ein Bild verschwindet, es beim nächsten Wechsel an einer anderen position auftaucht.
So meine Frage: In welcher Größenordnung liegt die Anzahl deiner verfügbaren Bilder?

Ein ganz pfiffiger. Du hast natürlich recht haha

Es werden mindestens 10 Bilder sein, also diesbez. kein Problem..

cebito · 10.02.2009

AW: Bild zufällig tauschen

im head oder extra js-datei:

Code:

<script type="text/javascript">
<!--
function bildwechsel() {
    var images = new Array();
        images[0] = new Image(); images[0].src = "bild1.jpg";
        images[1] = new Image(); images[1].src = "bild2.jpg";
        images[2] = new Image(); images[2].src = "bild3.jpg";
        images[3] = new Image(); images[3].src = "bild4.jpg";
        images[4] = new Image(); images[4].src = "bild5.jpg";
    
    var n = Math.round(Math.random()*3);
    var i = Math.round(Math.random()*5);
        document.images[n+x].src = images[i].src;
        window.setTimeout("bildwechsel()", 2000);
}
-->
</script>

Var "n" sucht aus deinen drei Bildern ein zu tauschendes aus. Je nachdem, welche Nummer dein erstes zu tauschendes Bild hat, mußt du für x 'ne Zahl einsetzen. Das erste Bild (img-Tag - nicht Hintergrundbilder) im html hat 0 usw.

dann:

Code:

<body onload="javascript:bildwechsel();">

und an der Stelle wo sie hinsollen:

Code:

<div id="bildneu" />
    <img src="bild1.jpg" style="width:120px; height:80px" />
    <img src="bild2.jpg" style="width:120px; height:80px" />
    <img src="bild3.jpg" style="width:120px; height:80px" />    
</div>

Wenn du width und/oder height definierst, werden alle nachfolgenden Bilder in dieser Größe dargestellt, kannst es auch weglassen oder sicher sein, daß sie zumindest das gleiche Seitenverhältnis, besser noch dieselbe Größe haben.

Ach, versuch dich einfach mal, wenns nich klappt dann komm wieder...

stroyer · 10.02.2009

AW: Bild zufällig tauschen

Ich würd vielleicht noch ein "altes" n bzw. i abspeichern um zu vermeiden, dass sich nichts ändert.

cebito · 11.02.2009

AW: Bild zufällig tauschen

stroyer schrieb:
Ich würd vielleicht noch ein "altes" n bzw. i abspeichern um zu vermeiden, dass sich nichts ändert.

Jep, dazu hat ich nur gestern keine Zeit mehr, da noch die Abfragen usw. zu machen. Wie gesagt soll er erstmal testen und bei Fragen wiederkommen.

_Ludvik_ · 11.02.2009

AW: Bild zufällig tauschen

Ich danke euch allen für die Antworten

Ich werde wohl erst heute Abend oder Morgen zum testen kommen. Werd mich wieder melden..

_Ludvik_ · 02.03.2009

AW: Bild zufällig tauschen

So..hab nun endlich Zeit gefunden. Leider funktioniert das ganze bei mir nicht. Die Bilder werden nur bei einem Neuaufbau der Seite gewechselt, meist wechselt nur das zweite oder dritte Bild. Ausserdem sind häufig 2 gleiche Bilder zu sehen.
Habe den Code jetzt auch mit anderen verglichen, bin aber ne absolute Null in JS. Komm leider nicht hinter den Fehler

Naja, ich werds jetzt wohl so lösen, dass ich anstatt 3 nur 1 Bild auf der Seite hab.

cebito · 02.03.2009

AW: Bild zufällig tauschen

Poste doch mal, was du bis jetzt hast... so lässt sich schwer was dazu sagen.

_Ludvik_ · 02.03.2009

AW: Bild zufällig tauschen

cebito schrieb:
Poste doch mal, was du bis jetzt hast... so lässt sich schwer was dazu sagen.

Danke Cebito, ich hab nun einen Vorschlag mit nur einem wechselnden Bild dafür Fade Effekt erstellt. Bisl dafür argumentiert - und alle sind hochzufrieden

prophet2812 · 03.03.2009

AW: Bild zufällig tauschen

hi ich habs so gemacht
?
$images[] = 'img/header.jpg';
$images[] = 'img/header1.jpg';
$images[] = 'img/header2.jpg';
$images[] = 'img/header3.jpg';
$images[] = 'img/header4.jpg';
$images[] = 'img/header5.jpg';

$i = mt_rand(0, count($images)-1);
echo '<img src="'.$images[$i].'" border="0" />';
?>

siehe funktioniert einwandfrei.

mfg prophet

stroyer · 03.03.2009

AW: Bild zufällig tauschen

in diesem Fall könntest du eventuell mit Flash arbeiten und weich zwischen den einzelnen Bilder wechseln. Sonst gefällt es mir sehr gut.