Bilder der Reihe nach laden!

Speedy19102000

Speedy19102000

Mitglied
Moin!

Bin am verzweifeln! Und zwar möchte ich, dass sich die 6 Bilder der Reihe nach
alle 10 Sekunden automatisch aktualisieren, beim sechsten Bild angekommen,
aktualisiert sich dann wieder das erste links oben u.s.w.. Unter jedem Bild, soll
dann die Zeit angezeigt werden, wann das Bild aktualisiert worden ist.
Ich habe mir schon die Finger wund gesucht, aber nichts dergleichen finden können.

Hier der Code, so wie ich es mir in etwa vorgestellt habe.
(Das Webcambild ist willkürlich gewählt, aber als Beispiel sehr gut.[JPG])
Code: 
<html>
<head>
<title>Test</title>


</head>

<body>

<table border="1">
<tr>
<td><img src="http://www.antenne.com/images/webcam/webcam_1.jpg" name="t01"><br><span id="loadtime">00:00:00</span></td>
<td><img src="http://www.antenne.com/images/webcam/webcam_1.jpg" name="t02"><br><span id="loadtime">00:00:00</span></td>
<td><img src="http://www.antenne.com/images/webcam/webcam_1.jpg" name="t03"><br><span id="loadtime">00:00:00</span></td>
</tr><tr>
<td><img src="http://www.antenne.com/images/webcam/webcam_1.jpg" name="t04"><br><span id="loadtime">00:00:00</span></td>
<td><img src="http://www.antenne.com/images/webcam/webcam_1.jpg" name="t05"><br><span id="loadtime">00:00:00</span></td>
<td><img src="http://www.antenne.com/images/webcam/webcam_1.jpg" name="t06"><br><span id="loadtime">00:00:00</span></td>
</tr>
</table>

</body>

</html>
Bitte um Eure Hilfe!

MfG Speedy
 
Was die 10 Sekunden angeht, da hilft dir setTimeout()

Einen Zeiger auf die Bilder erhältst du bspw., indem du der Tabelle eine ID vergibst, und dann per:
Code: 
document.getElementById('idDerTabelle').getElementsByTagName('IMG')
...damit hast du schon mal alle Bilder in einem Array, den du wunderbar durchlaufen kannst.

Das Neuladen geht so: weise dem Bild ein neues src-Attribut zu, indem du an den originalen Pfad ein ? und bspw. einen aktuellen Timestamp anhängst, dadurch wird verhindert, dass das Bild aus dem Cache geladen wird.

Zur Uhrzeit...wenn du einen Zeiger auf das Bild hast, kannst du dich von dort aus zu dem <span> bewegen:
Code: 
[imgObjekt].parentNode.lastChild
....weise der innerHTML-Eigenschaft die aktuelle Uhrzeit zu.
 
@ Sven Mintel

Danke für Deine schnelle Hilfe.

Ich werde es mal versuchen umzusetzen und schauen,
ob meine geringen Kenntnisse dafür ausreichen.

Ich hoffe, dass Du mir noch ein bisschen mehr helfen kannst.

MfG Speedy
 
Klar, wenn du steckenbleibst, sag Bescheid, ich wollt dir nur nicht alles fertig servieren, davon lernst du ja nichts :)
 
Ist das wenigstens der richtige Ansatz, oder lieg ich damit ganz falsch?

Code: 
<html>
<head>
<title>Test</title>

<script type="text/javascript">
function reloadImage(imgName)  {
if(document.images)
document.images[imgName].src = document.images[imgName].src + '?' + Math.random();
}
window.setTimeout("reloadImage('t01')", 3000);
</script>
</head>

<body onload="reloadImage(imgName)">

<table border="1">
<tr>
<td id="t001"><img src="http://www.antenne.com/images/webcam/webcam_1.jpg" name="t01"><br><span id="loadtime">00:00:00</span></td>
<td id="t002"><img src="http://www.antenne.com/images/webcam/webcam_1.jpg" name="t02"><br><span id="loadtime">00:00:00</span></td>
<td id="t003"><img src="http://www.antenne.com/images/webcam/webcam_1.jpg" name="t03"><br><span id="loadtime">00:00:00</span></td>
</tr><tr>
<td id="t004"><img src="http://www.antenne.com/images/webcam/webcam_1.jpg" name="t04"><br><span id="loadtime">00:00:00</span></td>
<td id="t005"><img src="http://www.antenne.com/images/webcam/webcam_1.jpg" name="t05"><br><span id="loadtime">00:00:00</span></td>
<td id="t006"><img src="http://www.antenne.com/images/webcam/webcam_1.jpg" name="t06"><br><span id="loadtime">00:00:00</span></td>
</tr>
</table>

</body>

</html>

MfG Speedy
 
Sorry, ich muss jetzt erstmal weg, ich schaue heut nacht mal rüber ;)

Der Ansatz ist aber schon mal gut.
Du müsstest allerdings eingangs den Originalpfad irgendwie speichern, sonst erhältst du beim erneuten Aufruf die beim letzten Aufruf veränderte URL mit der Zufallszeichenkette.
 
Ich hoffe, dass ich jetzt auf den richtigen Weg bin.

Das erste Bild läd schon neu, nur weis ich nicht mehr, wie ich die Reihenfolge hinbekommen soll, geschweige die Zeit im <span>.
Jedenfalls nicht ohne Deine Hilfe.

Wenn Du wieder da bist, kannst Du ruhig schon posten. Ich werde 100%ig heute Nacht auch wieder hier sein!

Code: 
<html>
<head>
<title>Test</title>

<script type="text/javascript">

function reloadImage()  {
    document.getElementById("t001").innerHTML = '<img src="http://www.antenne.com/images/webcam/webcam_1.jpg?'+new Date().getTime()+'">';
}
window.setTimeout("reloadImage()", 10000);

</script>
</head>

<body>

<table border="1">
<tr>
<td id="t001"><img src="http://www.antenne.com/images/webcam/webcam_1.jpg"><br><span id="loadtime">00:00:00</span></td>
<td id="t002"><img src="http://www.antenne.com/images/webcam/webcam_1.jpg"><br><span id="loadtime">00:00:00</span></td>
<td id="t003"><img src="http://www.antenne.com/images/webcam/webcam_1.jpg"><br><span id="loadtime">00:00:00</span></td>
</tr><tr>
<td id="t004"><img src="http://www.antenne.com/images/webcam/webcam_1.jpg"><br><span id="loadtime">00:00:00</span></td>
<td id="t005"><img src="http://www.antenne.com/images/webcam/webcam_1.jpg"><br><span id="loadtime">00:00:00</span></td>
<td id="t006"><img src="http://www.antenne.com/images/webcam/webcam_1.jpg"><br><span id="loadtime">00:00:00</span></td>
</tr>
</table>

</body>

</html>
Bis dahin!

MfG Speedy
 
So, hier mal ein Vorschlag(hab mal eine andere Webcam genommen, damit man auch sieht, das was passiert)
Code: 
<html>
<head>
<title>Test</title>

<script type="text/javascript">


function reloadImage(i)  
{
  imgs=document.getElementById('tbl').getElementsByTagName('IMG');
  img=imgs[i];
  if(!img.getAttribute('lowsrc'))img.setAttribute('lowsrc',img.src);
  img.src=img.lowsrc+'?'+new Date().getTime();
  img.parentNode.lastChild.innerHTML='aktuelle Zeit';
  setTimeout("reloadImage("+((i==imgs.length-1)?0:i+1)+")",10000)
}

window.onload=function()
{
  setTimeout("reloadImage(0)",10000)
}

</script>
</head>

<body>

<table border="1" id="tbl">
<tr>
<td id="t001"><img src="http://www.berlin.de/.img/webcam/webcam.jpeg"><br><span id="loadtime">00:00:00</span></td>
<td id="t002"><img src="http://www.berlin.de/.img/webcam/webcam.jpeg"><br><span id="loadtime">00:00:00</span></td>
<td id="t003"><img src="http://www.berlin.de/.img/webcam/webcam.jpeg"><br><span id="loadtime">00:00:00</span></td>
</tr><tr>
<td id="t004"><img src="http://www.berlin.de/.img/webcam/webcam.jpeg"><br><span id="loadtime">00:00:00</span></td>
<td id="t005"><img src="http://www.berlin.de/.img/webcam/webcam.jpeg"><br><span id="loadtime">00:00:00</span></td>
<td id="t006"><img src="http://www.berlin.de/.img/webcam/webcam.jpeg"><br><span id="loadtime">00:00:00</span></td>
</tr>
</table>

</body>

</html>

Erklärung:
Code: 
window.onload=function()
{
  setTimeout("reloadImage(0)",10000)
}
das ganze wird beim onload der Seite gestartet, um auch sicherzugehen, dass die <img>-Objekte vorhanden sind. Als Parameter wird dabei eine Zahl übergeben...der Index des anzuzeigenden Bildes(da Indizes von Arrays bei 0 beginnen, steht da 0 und nicht 1 für das erste Bild)
Code: 
imgs=document.getElementById('tbl').getElementsByTagName('IMG');
Ich hatte ja vorher in einem Post davon gesprochen, dass man auf die Bilder ja gut über einen Array zugreifen kann, da sie sich alle innerhalb einer bestimmten Tabelle befinden. Hier wird der Zeiger auf diesen Array erzeugt(der Tabelle hab ich zu diesem Zweck die ID "tbl" verpasst)
Code: 
img=imgs[i];
Zeiger auf das aktuell zu manipulierende Bild
Code: 
if(!img.getAttribute('lowsrc'))img.setAttribute('lowsrc',img.src);
Ich erwähnte ja, dass es gut wäre, die Original-Adresse des Bildes irgendwo zu speichern...das wird hier getan, ich missbrauche dazu das Attribut lowSrc
Du hast in deinem Beispiel den Pfad statisch im Skript zu stehen, das geht natürlich auch, aber man will ja flexibel sein, und mit meiner Methode kann man problemlos auch verschiedene Webcams verwenden.
Code: 
img.src=img.lowsrc+'?'+new Date().getTime();
Im Grunde dasselbe wie bei dir, statt einer Zufallszahl nehme ich nur einen aktuellen Timestamp
Code: 
img.parentNode.lastChild.innerHTML='aktuelle Zeit';
Hier kannst du die aktuelle Zeit unter das Bild schreiben(das hab ich nicht fertiggemacht, wie du die aktuelle Zeit ermittelst, das kannst du hier erfahren: http://de.selfhtml.org/javascript/objekte/date.htm#allgemeines )
Der Zeiger auf das betreffende <span>-Element wird dabei ausgehend vom Bild erzeugt:
img->das Bild
parentNode->der Elternknoten des Bildes(<td>)
lastChild->das letze Kindelement von <td>(<span>)
Code: 
setTimeout("reloadImage("+((i==imgs.length-1)?0:i+1)+")",10000)
zu guter Letzt der erneute Funktionsaufruf.
Dabei muss ja wieder der Index des nächsten Bildes übergeben werden.
Dafür wird, falls wir uns nicht beim letzten Bild befinden, der aktuelle Index um 1 erhöht, ansonsten wird 0 übergeben...das Spiel kann also von vorn beginnen


Das wars schon...ich hoffe, du kannst was damit anfangen :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück