Grafik neu laden

[Stephan]

Hallo,
ich würde gerne eine Grafik(die einen Satelliten und die Erde zeigt)alle 10 Sekunden neuladen lassen, da die Position des Satelliten immer neu angezeigt werden soll. Ich habe gehört dass man das per Javascript macht. Ich kenne mich aber nur mit HTML aus. Kann mir jemand helfen?

P.S:Danke schon mal für Beiträge im Voraus!

[Der Martin]

Hallo Stephan,

ich würde gerne eine Grafik(die einen Satelliten und die Erde zeigt)alle 10 Sekunden neuladen lassen, da die Position des Satelliten immer neu angezeigt werden soll. Ich habe gehört dass man das per Javascript macht.

ja, das ist eine Möglichkeit, vielleicht sogar die beste.

Ich kenne mich aber nur mit HTML aus. Kann mir jemand helfen?

Helfen gern - Grundwissen und die Bereitschaft, aktiv mitzuarbeiten, solltest du aber bitte mitbringen.

Prinzipiell: Das Bild, das du austauschen willst, muss irgendwie identifizierbar sein. Es bietet sich an, ihm im HTML-Code eine ID zu geben, dann kannst du es in Javascript mit getElementById() adressieren.
Ein Neuladen des Bildes erreichst du, indem du den Wert seiner src-Eigenschaft neu setzt; das Problem dabei ist, dass die Bild-URL ja eigentlich gleich bleibt. Man löst das gern, indem man einen zufälligen URL-Parameter anhängt (z.B. einen fortlaufenden Zähler). Der Server ignoriert den, aber für den Client ist es jedesmal eine neue Ressource.
Dann musst du dafür sorgen, dass die Funktion, die diesen Bildaustausch veranlasst, regelmäßig wieder aufgerufen wird, und den allerersten Aufruf wirst du vermutlich direkt beim Laden anstoßen wollen.

Ein bisschen wirst du bestimmt hinkriegen; wenn du dann bei der Umsetzung auf Schwierigkeiten stößt, helfen wir dir gern weiter.

So long,
 Martin

[Stephan]

Prinzipiell: Das Bild, das du austauschen willst, muss irgendwie identifizierbar sein. Es bietet sich an, ihm im HTML-Code eine ID zu geben, dann kannst du es in Javascript mit getElementById() adressieren.
Ein Neuladen des Bildes erreichst du, indem du den Wert seiner src-Eigenschaft neu setzt; das Problem dabei ist, dass die Bild-URL ja eigentlich gleich bleibt. Man löst das gern, indem man einen zufälligen URL-Parameter anhängt (z.B. einen fortlaufenden Zähler). Der Server ignoriert den, aber für den Client ist es jedesmal eine neue Ressource.
Dann musst du dafür sorgen, dass die Funktion, die diesen Bildaustausch veranlasst, regelmäßig wieder aufgerufen wird, und den allerersten Aufruf wirst du vermutlich direkt beim Laden anstoßen wollen.

Ein bisschen wirst du bestimmt hinkriegen; wenn du dann bei der Umsetzung auf Schwierigkeiten stößt, helfen wir dir gern weiter.

So long,
Martin

Hallo Martin,
so ganz mitgekommen bin ich da jetzt nicht. Könntest du nicht mal ein Beispiel zum Neuladen geben?

[Cheatah]

Hi,

so ganz mitgekommen bin ich da jetzt nicht.

das liegt vermutlich daran, dass Du den folgenden Satz überlesen hast:

"Helfen gern - Grundwissen und die Bereitschaft, aktiv mitzuarbeiten, solltest du aber bitte mitbringen."

Soll heißen:

Könntest du nicht mal ein Beispiel zum Neuladen geben?

Was hast Du bisher erreicht, an welcher Stelle bist Du nicht weitergekommen, und was hast Du mit welchen Ergebnissen versucht, um dieses Problem zu beheben?

Cheatah

[Stephan]

»»Was hast Du bisher erreicht, an welcher Stelle bist Du nicht weitergekommen, und was hast Du mit welchen Ergebnissen versucht, um dieses Problem zu beheben?

Cheatah

Ich hab hier 2 Anleitungen gefunden:12 Beide sind unterschiedlich. Welche ist denn richtig?

[Stephan]

Anscheinend will oder kann mir keiner Helfen. Dann werd ich die Frage wohl in anderen Foren stellen müssen.

[Kai345]

[latex]Mae  govannen![/latex]

Anscheinend will oder kann mir keiner Helfen. Dann werd ich die Frage wohl in anderen Foren stellen müssen.

Mach das. Ich schreibe dir sogar die Einleitung, die du dort verwenden kannst:

Hallo!
Ich habe diese Frage schon im SelfHTML-Forum gestellt, dort auch Antworten erhalten, die es mir ermöglichen würden, das Problem zu lösen, wenn ich bereit wäre, die in diesen Antworten verlinkten Beschreibungen nachzulesen und selber denkend zusammenzusetzen, aber das will ich nicht, sondern einen fertigen Code, den ich nur kopieren muß, daher hier mein Problem:

Cü,

Kai

[Stephan]

[latex]Mae  govannen![/latex]

»» Anscheinend will oder kann mir keiner Helfen. Dann werd ich die Frage wohl in anderen Foren stellen müssen.

Mach das. Ich schreibe dir sogar die Einleitung, die du dort verwenden kannst:

Hallo!
Ich habe diese Frage schon im SelfHTML-Forum gestellt, dort auch Antworten erhalten, die es mir ermöglichen würden, das Problem zu lösen, wenn ich bereit wäre, die in diesen Antworten verlinkten Beschreibungen nachzulesen und selber denkend zusammenzusetzen, aber das will ich nicht, sondern einen fertigen Code, den ich nur kopieren muß, daher hier mein Problem:

Cü,

Kai

Haha, sehr lustig und hilfsbereit!

[Kai345]

[latex]Mae  govannen![/latex]

Haha, sehr lustig und hilfsbereit!

Nein, leider überhaupt nicht lustig. Martin hat dir eine sehr ausführliche Antwort (mit Links) gegeben, incl. dem Hinweis, daß du gerne Nachfragen kannst, wenn du mit dieser Beschreibung nicht weiterkommst. Schon 5 Minuten später (also kannst du dich gar nicht damit befasst haben) bettelst du um Code, kurz darauf kommt dann

Anscheinend will oder kann mir keiner Helfen. Dann werd ich die Frage wohl in anderen Foren stellen müssen.

Das ist schlichtweg eine Unverschämtheit.

Cü,

Kai

[Stephan]

[latex]Mae  govannen![/latex]

»» Haha, sehr lustig und hilfsbereit!

Nein, leider überhaupt nicht lustig. Martin hat dir eine sehr ausführliche Antwort (mit Links) gegeben, incl. dem Hinweis, daß du gerne Nachfragen kannst, wenn du mit dieser Beschreibung nicht weiterkommst. Schon 5 Minuten später (also kannst du dich gar nicht damit befasst haben) bettelst du um Code, kurz darauf kommt dann

»» Anscheinend will oder kann mir keiner Helfen. Dann werd ich die Frage wohl in anderen Foren stellen müssen.

Das ist schlichtweg eine Unverschämtheit.

Cü,

Kai

Hör mal, ich bin nicht so ein PC-Freak. Ich kapier halt nicht alles, was da steht. Okay?!

[minicrispie]

Hallo,

Hör mal, ich bin nicht so ein PC-Freak. Ich kapier halt nicht alles, was da steht. Okay?!

und was hast du bis jetzt gemacht, was zur Lösung führen könnte?
Ganz ehrlich!
Ich glaube: Nichts.

MfG. Christoph Ludwig

[Stephan]

Hallo,

»» Hör mal, ich bin nicht so ein PC-Freak. Ich kapier halt nicht alles, was da steht. Okay?!

und was hast du bis jetzt gemacht, was zur Lösung führen könnte?
Ganz ehrlich!
Ich glaube: Nichts.

MfG. Christoph Ludwig

Du glaubst falsch. Ich habe die ganze Zeit mich an den beiden anderen Anleitungen orientiert. Jetzt habe ich es aufgegeben, da es nie funktioniert hat. Ich habe immer wieder neu ausprobiert, es hat aber halt nicht geklappt.

[minicrispie]

Hallo,

Du glaubst falsch. Ich habe die ganze Zeit mich an den beiden anderen Anleitungen orientiert. Jetzt habe ich es aufgegeben, da es nie funktioniert hat. Ich habe immer wieder neu ausprobiert, es hat aber halt nicht geklappt.

1. Hast du dein IMG-Element
2. Musst du dieses per Javascript ansprechen
3. Musst du dessen SRC-Eigenschaft ändern
4. Musst du mit setTimeout die funktion erneut Aufrufen
und
5. Dieses kleine Script musst du per onload erst einmal starten.

was ist daran so schwer?
Martin hat dir doch gute Links gegeben?

MfG. Christoph Ludwig

[Stephan]

Hallo,

»» Du glaubst falsch. Ich habe die ganze Zeit mich an den beiden anderen Anleitungen orientiert. Jetzt habe ich es aufgegeben, da es nie funktioniert hat. Ich habe immer wieder neu ausprobiert, es hat aber halt nicht geklappt.

1. Hast du dein IMG-Element
2. Musst du dieses per Javascript ansprechen
3. Musst du dessen SRC-Eigenschaft ändern
4. Musst du mit setTimeout die funktion erneut Aufrufen
   und
5. Dieses kleine Script musst du per onload erst einmal starten.

was ist daran so schwer?
Martin hat dir doch gute Links gegeben?

MfG. Christoph Ludwig

Ich verstehe nicht was das alles steht. Beim 1.Punkt weiß ich schon nicht mehr weiter, weil ich das nicht verstehe, was da steht. Kann mir jemand das nicht mal alles in Schritten sageb, was ich machen soll, damit ich dieses Script bekomme?

[minicrispie]

Hallo,

Ich verstehe nicht was das alles steht. Beim 1.Punkt weiß ich schon nicht mehr weiter, weil ich das nicht verstehe, was da steht. Kann mir jemand das nicht mal alles in Schritten sageb, was ich machen soll, damit ich dieses Script bekomme?

na ganz toll ..
also nochmal:
1. du hast ein IMG-Element
<img src="blubb.png" alt="MeinBild" id="DasBild">

2. Musst du dieses per Javascript ansprechen
document.getElementById( "DasBild" );

3. Musst du dessen SRC-Eigenschaft ändern
document.getElementById( "DasBild" ).src = "blubb.png";

4. Musst du mit setTimeout die funktion erneut Aufrufen
setTimeout( "DieFunktionDieDasBildWechselt()", 1000 );

5. Dieses kleine Script musst du per onload erst einmal starten.
<body onload="DieFunktionDieDasBildWechselt()">

jetzt kannst du dir hoffentlich mal was zusammenbasteln ... diese kleinen Informationen hättest du auch rauslesen können.

MfG. Christoph Ludwig

[Stephan]

Hallo,

»» Ich verstehe nicht was das alles steht. Beim 1.Punkt weiß ich schon nicht mehr weiter, weil ich das nicht verstehe, was da steht. Kann mir jemand das nicht mal alles in Schritten sageb, was ich machen soll, damit ich dieses Script bekomme?

na ganz toll ..
also nochmal:

1. du hast ein IMG-Element
   <img src="blubb.png" alt="MeinBild" id="DasBild">

2. Musst du dieses per Javascript ansprechen
   document.getElementById( "DasBild" );

3. Musst du dessen SRC-Eigenschaft ändern
   document.getElementById( "DasBild" ).src = "blubb.png";

4. Musst du mit setTimeout die funktion erneut Aufrufen
   setTimeout( "DieFunktionDieDasBildWechselt()", 1000 );

5. Dieses kleine Script musst du per onload erst einmal starten.
   <body onload="DieFunktionDieDasBildWechselt()">

jetzt kannst du dir hoffentlich mal was zusammenbasteln ... diese kleinen Informationen hättest du auch rauslesen können.

MfG. Christoph Ludwig

Ich probiers.

[Stephan]

So, jetzt hab ich es gemacht. Nur irgendwie nimmt der die falsche Grafik und diese ist jetzt überdimensioniert groß geworden. Was habe ich falsch gemacht?
Hier der Abschnitt mit dem Script:

  
<p><img  
src="http://www.heavens-above.com/orbitdisplay.aspx?icon=iss&amp;width=600&amp;height=300&amp;mode=M&amp;satid=25544"  
alt="MeinBild" id="DasBild"> <script language="javascript">  
document.getElementById( "DasBild" );  
  
document.getElementById( "DasBild" ).src = "http://www.heavens-above.com/orbitdisplay.aspx?icon=iss&amp;width=250&amp;height=250&amp;mode=A&amp;satid=25544";  
  
setTimeout( "DieFunktionDieDasBildWechselt()", 1000 );  
  
<body onload="DieFunktionDieDasBildWechselt()">  
</script>  
</p>  

[Stephan]

UPS! Es muss so heißen:

  
document.getElementById( "DasBild" ).src = "http://www.heavens-above.com/orbitdisplay.aspx?icon=iss&width=600&height=300&mode=M&satid=25544";  

[Stephan]

Jetzt ist wieder alles normal mit der Grafik(ich musste noch die Seite neu laden). Aber irgendwie wierd immer noch nicht die Grafik neu geladen. Hier der Code:

  
<p><img  
src="http://www.heavens-above.com/orbitdisplay.aspx?icon=iss&amp;width=600&amp;height=300&amp;mode=M&amp;satid=25544"  
alt="MeinBild" id="DasBild"> <script language="javascript">  
document.getElementById( "DasBild" );  
  
document.getElementById( "DasBild" ).src = "http://www.heavens-above.com/orbitdisplay.aspx?icon=iss&amp;width=600&amp;height=300&amp;mode=M&amp;satid=25544";  
  
setTimeout( "DieFunktionDieDasBildWechselt()", 1000 );  
  
<body onload="DieFunktionDieDasBildWechselt()">  
</script>  
</p>  

Und hier meine Website:Hier
(die Grafik ist unter Satelliten/ISS)

[molily]

document.getElementById( "DasBild" );

Dieser Befehl tut nichts. Er sprichst das Bild an, ohne damit irgendetwas zu tun. Du kannst ihn weglassen.

document.getElementById( "DasBild" ).src = "http://www.heavens-above.com/orbitdisplay.aspx?icon=iss&amp;width=600&amp;height=300&amp;mode=M&amp;satid=25544";

Das ist schon ganz richtig, allerdings musst du hier & nicht durch &amp; maskieren.
Und wie gesagt ist vermutlich notwendig, dass du die Adresse bei jeder Aktualisierung veränderst. Sonst verwendet der Browser ggf. die alte Version der Grafik wieder, anstatt sie neu vom Server zu laden. Du kannst wie in den von dir gefundenen Beispielen Math.random() (d.h. eine Zufallszahl) an die Adresse anhängen.

setTimeout( "DieFunktionDieDasBildWechselt()", 1000 );

Sorry, es geht bringt nichts, Quellcode-Bruchstücke zu kopieren, ohne zu verstehen, was sie tun und auf was man dich damit hinweisen will.

Diese http://de.selfhtml.org/javascript/sprache/funktionen.htm@title=Funktion hast du nicht definiert, also kann sie auch nicht aufgerufen werden. Zum Beispiel:

function bildneuladen () {  
   document.getElementById("DasBild").src = "http://www.heavens-above.com/orbitdisplay.aspx?icon=iss&width=600&height=300&mode=M&satid=25544&" + Math.random();  
   setTimeout("bildneuladen()", 1000);  
}

Wenn du den obigen Befehl in einer Funktion unterbringst, kannst du ihn mehrfach ausführen. Durch den setTimeout-Befehl ruft die Funktion sich immer wieder selbst mit Verzögerung auf.

Das erste Ausführen der Funktion kannst du mit dem JavaScript-Befehl
window.onload = bildneuladen;
starten, oder indem du im body-Tag schreibst:
<body onload="bildneuladen()">

Mathias

[Stephan]

Ist das jetzt so richtig?:

  
<p><img  
src="http://www.heavens-above.com/orbitdisplay.aspx?icon=iss&amp;width=600&amp;height=300&amp;mode=M&amp;satid=25544"  
alt="MeinBild" id="DasBild"> <script language="javascript">  
<body onload="bildneuladen()">  
function bildneuladen () {  
   document.getElementById("DasBild").src = "http://www.heavens-above.com/orbitdisplay.aspx?icon=iss&width=600&height=300&mode=M&satid=25544&" + Math.random();  
   setTimeout("bildneuladen()", 1000);  
}  
</script>  
</p>  

[molily]

Ist das jetzt so richtig?:
[code lang=html]
<script language="javascript">
<body onload="bildneuladen()">

Nein.
Das body-Element umfasst die gesamte Webseite. (<http://de.selfhtml.org/html/allgemein/grundgeruest.htm@title=Grundgerüst einer HTML-Datei>)
Dein Dokument hat wahrscheinlich schon ein body-Element. Das Attribut onload="bildneuladen()" gehört dann in dessen Start-Tag.
Du kannst den body-Start-Tag nicht zweimal angeben, und vor allem nicht innerhalb des script-Elements.

Aber wie gesagt kannst du auch gleichwertig im Script notieren:

window.onload = bildneuladen;

Das kann entweder vor oder nach der Funktionsdefinition function bildneuladen () {...} stehen.

Mathias

[Stephan]

Wie macht man das bei 2 Grafiken?

[Stephan]

Ich will das jetzt auch noch mit der 2 Grafik machen. Aber irgendwie funktioniert das mit der 2. Grafik nicht(das Neuladen). Hier ist der Code der 1. Grafik:

  
<p><img  
src="http://www.heavens-above.com/orbitdisplay.aspx?icon=iss&amp;width=600&amp;height=300&amp;mode=M&amp;satid=25544"  
alt="Karte" id="Karte"> </p>  
  
<p><script language="javascript">  
function bildneuladen () {  
   document.getElementById("Karte").src = "http://www.heavens-above.com/orbitdisplay.aspx?icon=iss&width=600&height=300&mode=M&satid=25544&" + Math.random();  
   setTimeout("bildneuladen()", 1000);  
}  
</script> </p>  

Hier ist der Code der 2. Grafik:

  
<p><img  
src="http://www.heavens-above.com/orbitdisplay.aspx?icon=iss&amp;width=250&amp;height=250&amp;mode=A&amp;satid=25544"  
alt="heute" id="Erde"> </p>  
  
<p><script language="javascript">  
function bildneuladen () {  
   document.getElementById("Erde").src = "http://www.heavens-above.com/orbitdisplay.aspx?icon=iss&width=250&height=250&mode=A&satid=25544&" + Math.random();  
   setTimeout("bildneuladen()", 1000);  
}  
</script></p>  

Was ist falsch?

[minicrispie]

Hallo,

Was ist falsch?

Du hast das Grundgerüst einer HTML-Datei nicht verstanden.

Folgender Aufbau:

<html>  
   <head>  
      <title>blubb</title>  
      <!-- ALLE Scripts und Styles -->  
   </head>  
   <body>  
   </body>  
</html>

Als erstes fügst du deine 2 Bilder ein:

<html>  
   <head>  
      <title>blubb</title>  
      <!-- ALLE Scripts und Styles -->  
   </head>  
   <body>  
      <img src...>  
      <img src...>  
   </body>  
</html>

Nun willst du also Bilder wecheseln.
also entsteht eine Funktion, die Bilder wechselt( neu lädt ):

<html>  
   <head>  
      <title>blubb</title>  
      <script type="text/javascript">

  
//Diese Fuktion lädt das Bild neu  
//PARAMETERLISTE:  
//1. Die ID des Bildes, damit es angesprochen werden kann.  
//2. Die Original-Adresse, an der später eine Zufallzahl als Parameter angehängt wird.  
//3. Die Zeit, nach der das Bild neu geladen wird.  
function ChangeImg( id, adresse, zeit )  
{  
    //Die Adresse des Bildes ändern  
    //Mit Hilfe der eindeutigen ID wird das Element mit document.getElementById() angesprochen.  
    //Mittels dieser Referenz auf das Bild kann auf die Adresse( src ) zugegriffen werden.  
    //An die normale Adresse wird ein Zufälliger Parameter angehangen( gegebenfalls ändern)  
    document.getElementById( id ).src = adresse + "?" + Math.random();  
  
    //Die Funktion nach [zeit] Sekunden nocheinmal aufrufen  
    //Dies Geschieht über eine Anonyme Funktion in der ChangeImg() rekursiv aufgerufen wird.  
    //Dabei werden alle Parameter der Funktion einfach mit übergeben  
    setTimeout( function()  
    {  
       ChangeImg( id, adresse, zeit );  
    }, zeit);  
}

</script>  
<head>  
<body>  
<img src="IMG_1.png" id="Bild_1" alt="">  
<img src="IMG_1.png" id="Bild_2" alt="">  
  
//Nach dem Rendern die Bild-Wechselnde Funktion aufrufen  
<script type="text/javascript">  
[code lang=javascript]/* Der Wechsel eines Bildes erfolgt nach 3 Sekunden (3000 Millisekunden) */  
ChangeImg( "Bild_1", "IMG_1.png", 3000); //Bild 1 und  
ChangeImg( "Bild_2", "IMG_2.png", 3000); //Bild 2.

</script>
</body>
</html>
[/code]

In deinem Fall hast du die Funktion bildneuladen() einfach überschrieben, da du sie neu definiert hast.

MfG. Christoph Ludwig

[Stephan]

JJJJJJJJJJJAAAAAAAAAAAAAAAAAAAAAA!!!!!!!! Es funktioniert 1000 Dank Mathias!

[Stephan]

»» document.getElementById( "DasBild" ).src = "http://www.heavens-above.com/orbitdisplay.aspx?icon=iss&amp;width=600&amp;height=300&amp;mode=M&amp;satid=25544";

Das ist schon ganz richtig, allerdings musst du hier & nicht durch &amp; maskieren.
Und wie gesagt ist vermutlich notwendig, dass du die Adresse bei jeder Aktualisierung veränderst. Sonst verwendet der Browser ggf. die alte Version der Grafik wieder, anstatt sie neu vom Server zu laden. Du kannst wie in den von dir gefundenen Beispielen Math.random() (d.h. eine Zufallszahl) an die Adresse anhängen.

Diesen Schritt habe ich nicht so richtig verstanden. Was soll ich da immer machen?

[Stephan]

Ich hab das Problem so gelöst:

<p><img  
src="http://www.heavens-above.com/orbitdisplay.aspx?icon=iss&amp;width=250&amp;height=250&amp;mode=A&amp;satid=25544"  
alt="Erde" id="Erde" /> aktuelle Position der ISS(Ansicht von der  
ISS auf die Erde)</p>  
  
<p><img  
src="http://www.heavens-above.com/orbitdisplay.aspx?icon=iss&amp;width=600&amp;height=300&amp;mode=M&amp;satid=25544"  
alt="Karte" id="Karte" /> (Kartenansicht)</p>  
  
<p><script language="javascript">  
function bildneuladen () {  
   document.getElementById("Karte").src = "http://www.heavens-above.com/orbitdisplay.aspx?icon=iss&width=600&height=300&mode=M&satid=25544&" + Math.random();  
   document.getElementById("Erde").src = "http://www.heavens-above.com/orbitdisplay.aspx?icon=iss&width=250&height=250&mode=A&satid=25544&" + Math.random();  
   setTimeout("bildneuladen()", 1000);  
}  
</script> </p>  

geht das auch so?

[molily]

Ich hab hier 2 Anleitungen gefunden:12 Beide sind unterschiedlich. Welche ist denn richtig?

Beide sind richtig. Und sie sind konzeptionell identisch, sie machen im Grunde das, was Martin ausführlich erklärt hat. Wenn sie bei dir nicht funktionieren, dann solltest du dich mit ihrer Funktionsweise vertraut machen, um sie korrekt einbinden zu können.

Dabei wollte man dir hier helfen. Hier will dich keiner ärgern oder mit irrelevanten Infos zubomben, sondern dir den Sachverhalt erklären. Wenn es schon daran scheitert, fremde Fertigscripte zum laufen zu bekommen, wäre das nämlich erst einmal angebracht.

Mathias

[Stephan]

Ich habe hier was gefunden:Klcik
Aber irgendwie funktioniert das bei mir nicht so richtig.Wieso? Ist da was falsch in der Anleitung?