Bilder der Reihe nach laden!

@ Sven Mintel

Hallo, freud mich Dich zu lesen!

Ich werde es sofort in Angriff nehmen und hoffe, dass Du noch ein Weilchen auf bist!

Hoffendlich hattest Du hattest einen schönen (Wochenend)Abend. :)
Und Danke, dass Du dein Wort gehalten hast.

Mit freundlichen Grüßen

Speedy
 
Bislang war auch ich nicht untätig, hier mein aktuelles Ergebniss. Ich versuche es mit Deinem zu Kombinieren!

> [EDIT] < (Mein letzter Stand)

(Habe es der Zeit wegen auf 5 Sekunden reduziert)

Du siehst, es funktioniert schonmal, aaaaber es muss das momentan ladende Bild mit rotem Hintergrund angezeigt werden,
genau so, wie parallel die Zeit [id="lt(x)"] und nicht schon vorher, nur dann stimmt es!

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

<style type="text/css">
body {
	color: #FFFF00;
	font-weight:bold;
}
.bdrstyle {
	font-family:Verdana;
	font-weight:bold;
	font-size:13px;
}
</style>

<script type="text/javascript"> 

function reloadImage(z,bg) 
{ 
    var neu = new Date(); 

    var hh = ((neu.getHours() < 10) ? '0' : '') + neu.getHours(); 
    var mm = ((neu.getMinutes() < 10) ? '0' : '') + neu.getMinutes(); 
    var ss = ((neu.getSeconds() < 10) ? '0' : '') + neu.getSeconds(); 

    with (document) 
    { 
        getElementById('im' + z).src = 'http://www.berlin.de/.img/webcam/webcam.jpeg?' + neu.getTime();
        getElementById('lt' + z).firstChild.nodeValue = 'Update: ' + hh + ':' + mm + ':' + ss + ' Uhr'; 
        document.getElementById('bg' + z).bgColor = ('#009966');
    } 

    if (++z > 6) 
        z = 1; 

    if (--bg > 6) 
        bg = 1;
        else { 
         document.getElementById('bg' + z).bgColor = ('#FF0000');
        }
    window.setTimeout(function() { reloadImage(z,bg); }, 5000); 
} 

window.setTimeout('reloadImage(1,1);', 5000); 
</script> 

</head> 
<body bgcolor="#000000"> 

<table border="0" class="bdrstyle" cellpadding="5" cellspacing="5"> 
    <tr> 
        <td id="bg1"><img id="im1" src="http://www.berlin.de/.img/webcam/webcam.jpeg"><br><span id="lt1">Update: 00:00:00 Uhr</span></td> 
        <td id="bg2"><img id="im2" src="http://www.berlin.de/.img/webcam/webcam.jpeg"><br><span id="lt2">Update: 00:00:00 Uhr</span></td> 
        <td id="bg3"><img id="im3" src="http://www.berlin.de/.img/webcam/webcam.jpeg"><br><span id="lt3">Update: 00:00:00 Uhr</span></td> 
    </tr> 
    <tr> 
        <td id="bg4"><img id="im4" src="http://www.berlin.de/.img/webcam/webcam.jpeg"><br><span id="lt4">Update: 00:00:00 Uhr</span></td> 
        <td id="bg5"><img id="im5" src="http://www.berlin.de/.img/webcam/webcam.jpeg"><br><span id="lt5">Update: 00:00:00 Uhr</span></td> 
        <td id="bg6"><img id="im6" src="http://www.berlin.de/.img/webcam/webcam.jpeg"><br><span id="lt6">Update: 00:00:00 Uhr</span></td> 
    </tr> 
</table> 

</body> 
</html>
Man, ist das eine schwere Geburt! (Für mich jedenfalls)

MfG Speedy
 
Zuletzt bearbeitet:
Ist ja super geworden :)

Hier mal die Änderung mit der Hintergrundfarbe(das zuletzt geladene Bild wird dabei in einer Variablen gespeichert, um seinen Hintergrund beim nächsten Aufruf zurückzusetzen)

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

<style type="text/css">
body {
    color: #FFFF00;
    font-weight:bold;
}
.bdrstyle td,.green {
    font-family:Verdana;
    font-weight:bold;
    font-size:13px;
    background:green;
}
.red{background:red !important}
</style>

<script type="text/javascript"> 
buffer=-1;
function reloadImage(z,bg) 
{ 
    
    var neu = new Date(); 

    var hh = ((neu.getHours() < 10) ? '0' : '') + neu.getHours(); 
    var mm = ((neu.getMinutes() < 10) ? '0' : '') + neu.getMinutes(); 
    var ss = ((neu.getSeconds() < 10) ? '0' : '') + neu.getSeconds(); 

    with (document) 
    { 
        getElementById('im' + z).src = 'http://www.berlin.de/.img/webcam/webcam.jpeg?' + neu.getTime();
        getElementById('lt' + z).firstChild.nodeValue = 'Update: ' + hh + ':' + mm + ':' + ss + ' Uhr'; 
        document.getElementById('bg' + z).className='red';
        if(buffer>-1)document.getElementById('bg' + buffer).className='green';
        buffer=z;
    } 

    if (++z > 6) 
        z = 1; 

    if (--bg > 6) 
        bg = 1;
        
    window.setTimeout(function() { reloadImage(z,bg); }, 5000); 
} 

window.setTimeout('reloadImage(1,1);', 5000); 
</script> 

</head> 
<body bgcolor="#000000"> 

<table border="0" class="bdrstyle" cellpadding="5" cellspacing="5"> 
    <tr> 
        <td id="bg1"><img id="im1" src="http://www.berlin.de/.img/webcam/webcam.jpeg"><br><span id="lt1">Update: 00:00:00 Uhr</span></td> 
        <td id="bg2"><img id="im2" src="http://www.berlin.de/.img/webcam/webcam.jpeg"><br><span id="lt2">Update: 00:00:00 Uhr</span></td> 
        <td id="bg3"><img id="im3" src="http://www.berlin.de/.img/webcam/webcam.jpeg"><br><span id="lt3">Update: 00:00:00 Uhr</span></td> 
    </tr> 
    <tr> 
        <td id="bg4"><img id="im4" src="http://www.berlin.de/.img/webcam/webcam.jpeg"><br><span id="lt4">Update: 00:00:00 Uhr</span></td> 
        <td id="bg5"><img id="im5" src="http://www.berlin.de/.img/webcam/webcam.jpeg"><br><span id="lt5">Update: 00:00:00 Uhr</span></td> 
        <td id="bg6"><img id="im6" src="http://www.berlin.de/.img/webcam/webcam.jpeg"><br><span id="lt6">Update: 00:00:00 Uhr</span></td> 
    </tr> 
</table> 

</body> 
</html>
 
@ Sven Mintel

Moin Sven!

Was soll ich noch dazu sagen, .....PERFECKT!

Nochmals vielen Dank für Deine Hilfe.

Wir [lesen] uns noch, bestimmt!

MfG Speedy
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück