Bilder aktualisieren - Website X5 Hilfe - Die Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App
Direkt zum Seiteninhalt

Bilder aktualisieren

Scripte > Bildobjekte

Automatische Bildaktualisierungen

Die klassische Art der Bildaktualisierung ist die Übertragung per FTP-Upload oder mit einem Batch Script. Das Bild wird auf dem Webserver regelmäßig hochgeladen und über die Webseite angezeigt. Damit der Nutzer auch regelmäßig das aktuelle Bild zu sehen bekommt, müsste dieser auch regelmäßig seinen Browser aktualisieren. Fraglich wäre welcher Nutzer das gern tut bzw. woher er das wissen sollte. Die nachfolgenden Möglichkeiten nehmen diese Arbeit ab.

ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken. HEAD-Code  in den HEAD-Bereich
<head>...</head> und HTML-Code in den BODY-Bereich <body>...</body> der aufrufende Datei einfügen.
Danach einfach die URL-Pfade, gegebenenfalls auch in den Attributen, zum Bild/zu den Bildern und die Variable "refresh" im Java-Script anpassen.
Ein normaler Aktualisierungsrythmus wäre alle 30 bis 60 Sekunden.
Die Bilder werden nicht aus dem Cache geladen!

Download Button
x runter geladen!
Automatische Aktualisierung durch Meta-Tag
Die Bildaktualisierung durch einen Meta-Tag im Dateikopf (HEAD-Bereich).
Das Bild wird wie eine normale Grafik eingebunden. Javascripts, Java-Applets oder zusätzliche Plugins werden nicht benötigt. Hier muss aber die Einstellung des  Intervalls zur Aktualisierung (refresh) im <body> Tag gestartet werden. Dies erfolgt mit <body onload="...">.
Bei der Aktualisierung wird die komplette Seite neu geladen, was besonders bei kurzen Intervallen störend wirkt.
Code für den <HEAD> Bereich
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="refresh" content="60">
Code für den <BODY> Bereich
<img src="wsX5Obj/Obj_IMG/natur_01.jpg" width="250" height="180">
Demo-Bild
Automatische Aktualisierung per Javascript
Die Bildaktualisierung erfolgt mit Javascript.
Auf diese Weise können auch beliebige viele Bilder eingebunden werden.
Durch einen Klick auf das Bild wird das jeweilige Bild durch das Attribut
target="_blank" in voller Größe auf einer neuen Seite im Browser angezeigt.
Hier erfolgt keine automatische Aktualisierung.
Code für den <BODY> Bereich
<script type="text/javascript" language="JavaScript">
// <![CDATA[
// Auffrischungsintervall in Sekunden
var refresh = 60; // 1  Minute
var imageURL = "wsX5Obj/Obj_IMG/natur_02.jpg";
function ImgRetry() {
setTimeout("ImgLoad()", refresh*1000);
}
function ImgLoad() {
if (imageURL == "") imageURL = document.images.Obj161_1.src;
var timestamp = new Date();
timestamp = "?" + timestamp.getTime();
document.images.Obj161_1.onload = "wsX5Obj/Obj_IMG/natur_02.jpg";
document.images.Obj161_1.src = imageURL + timestamp;
setTimeout("ImgLoad()", refresh*1000);
}
// ]]>
</script>

<a href="wsX5Obj/Obj_IMG/natur_02.jpg" target="_blank">
<img name="Obj161_1" src="wsX5Obj/Obj_IMG/natur_02.jpg"
onload="ImgLoad()" onerror="ImgRetry()" width="250" height="180" alt="Demo-Bild" />
</a>
Bild1     Bild2
Code für den <BODY> Bereich
<script type="text/javascript" language="JavaScript">
// <![CDATA[
// Auffrischungsintervall in Sekunden
var refresh = 60; // 1  Minute
var imageURL161_2 = "wsX5Obj/Obj_IMG/natur_03.jpg";
var imageURL161_3 = "wsX5Obj/Obj_IMG/natur_04.jpg";
function ImgRetry() {
setTimeout("ImgLoad()", refresh*1000);
}
function ImgLoad() {
if (imageURL161_2 == "") imageURL161_2 = document.Obj161_2.src;
var timestamp = new Date();
timestamp = "?" + timestamp.getTime();
document.images.Obj161_2.onload = "wsX5Obj/Obj_IMG/natur_03.jpg";
document.images.Obj161_2.src = imageURL161_2 + timestamp;
setTimeout("ImgLoad()", refresh*1000);
if (imageURL161_3 == "") imageURL161_3 = document.Obj161_3.src;
var timestamp = new Date();
timestamp = "?" + timestamp.getTime();
document.images.Obj161_3.onload = "wsX5Obj/Obj_IMG/natur_4.jpg";
document.images.Obj161_3.src = imageURL161_3 + timestamp;
setTimeout("ImgLoad()", refresh*1000);
}
// ]]>
</script>

<a href="wsX5Obj/Obj_IMG/natur_03.jpg" target="_blank">
<img name="Obj161_2" src="wsX5Obj/Obj_IMG/natur_03.jpg"
onload="ImgLoad()" onerror="ImgRetry()" width="250" height="180" alt="Bild1" /></a>
&nbsp; &nbsp;
<a href="wsX5Obj/Obj_IMG/natur_03.jpg" target="_blank">
<img name="Obj161_3" src="wsX5Obj/Obj_IMG/natur_04.jpg"
onload="ImgLoad()" onerror="ImgRetry()" width="250" height="180" alt="Bild2" /></a>
Das Bild wird in Sekunden aktualisiert.
Automatische Aktualisierung mit Javascript und Counter
Bei dieser Lösung übernimmt auch ein Javascript die Aktualisierung der Seite. Zusätzlich zeigt ein Counter dem Besucher an, wann das Bild neu geladen wird.
Hier muss aber die Einstellung des  Intervalls zur Aktualisierung (Counter) im <body> Tag gestartet werden. Dies erfolgt mit <body onload="...">.
Mit dem Attribut size="2" wird die Schriftgröße für den Zähler eingestellt.
Das Script ist auch für ältere Browser geeignet.
Code für den <HEAD> Bereich
<script language="JavaScript">
<!--
if (document.images) var refInterval = 0;
else var refInterval = 30; // Sekunden
function startCounter() {
refInterval = refInterval - 1;
var now = new Date();
var dummystring = parseInt(now.getTime() / 1000);
if (refInterval < 1) {
if (document.images) document.refImage.src = "wsX5Obj/Obj_IMG/natur_05.jpg" + "?" + dummystring;
else window.location.reload();
refInterval = 30;
}
document.counter.time.value = refInterval;
timerID = setTimeout("startCounter()", 1000);
}
//-->
</script>
Code für den <BODY> Tag
onload="startCounter();reFresh();"

Wer nicht mit Website X5 arbeitet:
<body onload="startCounter();reFresh();">
Code für den <BODY> Bereich
<img src="wsX5Obj/Obj_IMG/natur_05.jpg" name="refImage" width="250" height="180">
<form name="counter">Das Bild wird in
<input type="text" name="time" size="2" value="-"> Sekunden aktualisiert.
</form>
Feedbacks zu ""


Kein Kommentar
Vielen Dank für Dein Feedback.
HTML5
Button Spenden

© 2009 - 2019





Besucher Statistik
» 1 Online
» 127 Heute
» 387 Gestern
» 772 Woche
» 5198 Monat
» 5198 Jahr
» 332954 Gesamt
Record: 1420 (10.04.2014)
Gesamt Downloads:
Zurück zum Seiteninhalt