Bild zeitlich aktualisieren

[JulianBaumueller]

Hallo,

ich habe ein problem und zwar möchte ich demnächst eine webcam/überwachungskamera an dem Dach meines Hauses anbringen, um damit mein Heimatdorf zu filmen wegen dem Wetter und so weiter...

Ich habe es bereits geschafft, mit dem Programm "Cam2Web" die Bilder online zu stellen und Sekündlich aktualisieren zu lassen. Nun geht ums aktualisiren:

Wenn sekündlich aktualisiert wird sieht dass ganze ja so aus:

<meta http-equiv="Refresh" content="1">

So wird sekündlich die gesamte Seite aktualisiert und neu geladen.

Wenn ich aber nun per JavaScript (oder per PHP o.ä. wenn möglich) nur dieses eine Bild in diesem Takt aktualisiert haben möchte, muss ich dass dann so schreiben:
(Ich hab fast keine Ahnung von JavaScript(Grundkenntnisse usw.))

  
<script type="text/javascript">  
  
var sekunde = getSeconds();  
  
if(sekunden++)  
{  
document.getElementById('kamerabild').reload();  
}  
  
</script>  

  
<img src="kamerabild.jpg" id="kamerabild" width="300" height="300">  

wahrscheinlich hab ich jetzt was völlig falsches an code (JavaScript) geschreiben aber so 'ähnlich' sollte es glaub ich heißen....

Sorry wenn ich euch schwierigkeiten bereite.

Gruß
Julian.

[JulianBaumueller]

Hallo,

ich habe ein problem und zwar möchte ich demnächst eine webcam/überwachungskamera an dem Dach meines Hauses anbringen, um damit mein Heimatdorf zu filmen wegen dem Wetter und so weiter...

Ich habe es bereits geschafft, mit dem Programm "Cam2Web" die Bilder online zu stellen und Sekündlich aktualisieren zu lassen. Nun geht ums aktualisiren:

Wenn sekündlich aktualisiert wird sieht dass ganze ja so aus:

<meta http-equiv="Refresh" content="1">

So wird sekündlich die gesamte Seite aktualisiert und neu geladen.

Wenn ich aber nun per JavaScript (oder per PHP o.ä. wenn möglich) nur dieses eine Bild in diesem Takt aktualisiert haben möchte, muss ich dass dann so schreiben:
 (Ich hab fast keine Ahnung von JavaScript(Grundkenntnisse usw.))

~~~javascript

<script type="text/javascript">

var sekunde = getSeconds();

if(sekunde++)
 {
 document.getElementById('kamerabild').reload();
 }

</script>

  
  
 ~~~html
  
 <img src="kamerabild.jpg" id="kamerabild" width="300" height="300">  
 

wahrscheinlich hab ich jetzt was völlig falsches an code (JavaScript) geschreiben aber so 'ähnlich' sollte es glaub ich heißen....

Sorry wenn ich euch schwierigkeiten bereite.

Gruß
 Julian.

[Struppi]

Wenn ich aber nun per JavaScript (oder per PHP o.ä. wenn möglich) nur dieses eine Bild in diesem Takt aktualisiert haben möchte, muss ich dass dann so schreiben:
(Ich hab fast keine Ahnung von JavaScript(Grundkenntnisse usw.))

Das kannst du ändern, z.b. bei http://de.selfhtml.org/@title=selfhtml. Um ein Bild zu ändern, bietet sich das <http://de.selfhtml.org/javascript/objekte/images.htm@title=Image Objekt> an.

Struppi.

[Felix Riesterer]

Lieber JulianBaumueller,

es ist nicht besonders hilfreich, Dir mit Deinem originalen Posting selbst zu antworten, sodass zweimal dasselbe da steht... ein Versehen?

Wenn ich aber nun per JavaScript [...] dieses eine Bild in diesem Takt aktualisiert haben möchte [...]

Du benötigst in diesem Falle [ref:self812;javascript/objekte/window.htm#allgemeines@title=window].[ref:self812;javascript/objekte/window.htm#set_interval@title=setInterval()], in welches Du eine eigene Funktion hineinschreibst, die dann in dem von Dir festgelegten Zeitabstand aufgerufen wird.

<img src="kamerabild.jpg" id="kamerabild" width="300" height="300">

Du kannst das Bild über seine ID per JavaScript "anfassen". Das geht mit [ref:self812;javascript/objekte/document.htm#allgemeines@title=document].[ref:self812;javascript/objekte/document.htm#get_element_by_id@title=getElementById()]

Bauen wir einmal etwas zusammen:

<script type="text/javascript>//<![CDATA[

    function aktualisiere_kamerabild() {  
        // Refrenz auf das Bild-Elementobjekt  
        var bild = document.getElementById("kamerabild");  
  
        // Pfad zur Bilddatei mit URL-Parameter gegen Browser-Caching  
        var src = "http://www.example.org/kamerabild.jpg?time=";  
  
        // aktuelle Systemzeit in Millisekunden  
        var sekunden = new Date().getTime();  
  
        // neue Quelle dem Bild zuordnen  
        bild.src = src + sekunden;  
    }  
  
    // alle 1000 Millisekunden "aktualisiere_kamerabild" ausführen  
    window.setInterval(aktualisiere_kamerabild, 1000);

//]]></script>

Liebe Grüße,

Felix Riesterer.

[JulianBaumueller]

Danke euch, funktioniert!

Ich hoffe ich kann euch mit dieser erkenntniss öfters mal Fragen stellen wenn ich garnicht mehr weiter weiß...

Viele Grüße,
Julian.

[hotti]

moin,

So wird sekündlich die gesamte Seite aktualisiert und neu geladen.

Warum die gesamte Seite, wenn nur das Bild neu geladen werden soll? Eben dafür gibts ja JS, dass eben nicht die gesamte Seite neu geladen werden muss. Und wenn es dazu Content vom Server braucht, wird der per ajax angefordert.

Hotti

[Felix Riesterer]

Lieber hotti,

Warum die gesamte Seite, wenn nur das Bild neu geladen werden soll?

richtig!

Eben dafür gibts ja JS, dass eben nicht die gesamte Seite neu geladen werden muss.

Richtig!

Und wenn es dazu Content vom Server braucht, wird der per ajax angefordert.

Unsinn! Dazu braucht es kein AJAX.

Liebe Grüße,

Felix Riesterer.