wie definiere ich welches SCR zum Array gehört ?

[Medeno]

In Selfhtml findet sich unter
SELFHTML: JavaScript / Objektreferenz / images
die Beschreibung wie Bilder getauscht werden.
Ich habe auf einer Webseite 3 Images. Wie weise ich dem Array zu welches der <img scr.... auszutauschen hat ?
Binde ich den Source auf die Seite ein, dann nimmt er das erste scr das er findet und das ist der "Header.gif".

Auszug aus meiner Seite:
<div id="alles">
<div id="header"><img src="images/Header-0304-2.gif" width="1024" height="140"></div>
<!-- Anfang linke Spalte -->
......

<div id="contentpages">
.....
<td width="86" ><img src="images/blank.gif"
width="85" height="1" /></td>
<td width="305" height="200" ><img src="images/Kamin01.jpg" alt="Kamine-Adams" width="300" height="196" longdesc="http://www.Kamine-Adams.de" /></td>
<script type="text/javascript">
var b = new Array();
b[0] = new Image(); b[0].src = "images/Kamin02.jpg";
b[1] = new Image(); b[1].src = "images/Kamin03.jpg";
b[2] = new Image(); b[2].src = "images/Kamin04.jpg";
b[3] = new Image(); b[3].src = "images/Kamin05.jpg";
b[4] = new Image(); b[4].src = "images/Kamin06.jpg";
b[5] = new Image(); b[5].src = "images/Kamin07.jpg";
b[6] = new Image(); b[6].src = "images/Kamin08.jpg";
b[7] = new Image(); b[7].src = "images/Kamin09.jpg";
b[8] = new Image(); b[8].src = "images/Kamin01.jpg";
var i = 0;
function Animation () {
if (i > 3)
i = 0;
document.images[0].src = b.src;
i = i + 1;
window.setTimeout("Animation()", 1000);
}
window.setTimeout("Animation()", 1000);
</script>
.....

die Webseite steht aktuell unter:
Kamine-Adams => Kaminbau (ohne den Bilderwechsel)

Danke
Medeno

 

[Asipak4You]

irgendwie verstehe ich nicht genau was du da machst. welche funktion wird aufgerufen und wann und warum?

allgemein würde ich sagen verpasse den img-tags eine id

<img id="bild1" src="images/Header-0304-2.gif" width="1024" height="140">

und dann
function Animation () {
if (i > 3)
i = 0;
document.getElementById["bild1"].src = b.src;
i = i + 1;
window.setTimeout("Animation()", 1000);
}

keine ahnung ob das funktioniert weil ich nicht weiß was auf deiner seite passiert. wie gesagt, wodurch und wann soll der bilderwechsel ausgelöst werden?

 

[Medeno]

dann versuche ich es mal etwas genauer. Auf der Webseite sollen Die Bilder der Kamine automatisch ausgetauscht werden. Mit der Schleife werden die Bilder im Sekundenabstand gewechselt.
So wird es auch auf Selfhtml beschrieben.
Auf Selfhtml wird ein GIF gezeigt und mit der Schleife getauscht.
Nun hat meine Seite mehrere Images. Die Schleife nimmt nun das erste Image das sie auf der Seite findet - den Header - statt der Kaminbilder.
Also muss ich irgendwie dem Array das passende Image zuordnen. Und den Befehl / Zuordnung suche ich.

 

[Asipak4You]

wie es aussieht klappt es jetzt?

Kamine-Adams

document.images[0].src = b.src; <= das scheint du in => document.images[2].src = b.src; geändert zu haben..

eindeutiger wäre es aber wirklich jedem bild eine ID zu verpassen, denn wenn du jetzt noch ein bild vor dem Bild mit dem Index 2 einfügst, funktioniert es nicht mehr! Dann wird das falsche bild angesprochen... daher wie schon gesagt dem bild das du ändern möchtest eine id geben und dann

document.getElementById["idname"].src = b.src;

verwenden. Sollte funktionieren und dann sollte es keine probleme mehr geben!

 

[crash]

Erstmal gehört das Thema ins JavaScript-Forum.

Dann würde ich mir eine vernünftige Struktur aufbauen:

var images = [
    "http://www.html.de/images/Kamin02.jpg",
    "http://www.html.de/images/Kamin03.jpg",
    "http://www.html.de/images/Kamin04.jpg",
    "http://www.html.de/images/Kamin05.jpg",
    "http://www.html.de/images/Kamin06.jpg",
    "http://www.html.de/images/Kamin07.jpg",
    "http://www.html.de/images/Kamin08.jpg",
    "http://www.html.de/images/Kamin09.jpg",
    "http://www.html.de/images/Kamin01.jpg"
];

dann die Bilder vorladen:

function preload(images) {
    var i = 0;
    var image = document.createElement("img"); // new Image() ist out
    image.onload = function () {
       i++;
       if (typeof images[i] != "undefined") {
           image.onload = arguments.callee;
           image.src = images[i];
       }
    };
    image.src = images[i];
}
preload(images);

und dann Animieren:

window.onload = function () {
    // da kannst du dich selbst probieren
    // hol dir dazu das aktuelle Bild mit getElementById
}

Alles ungetestet.

 

[Medeno]

stimmt - ich habe den Wert von 0 auf 2 geändert.
Fürs erste reicht mir dies.

document.images[0].scr .... sucht das erste Bild der Seite
document.images[2].src = b.src; ... sucht das dritte Bild und so weiter.

Ist zwar nicht so elegant und macht Probleme wenn Bilder eingefügt werden, aber es funktioniert.
Wieder was gelernt.
Danke
Medeno