Bilder aktualisieren - Website X5 Hilfe - Die Helpsite

Logo Schriftzug
Logo WSX5
Website hundertprozent CO2 neutral mit Host Europe
Newsletter anmelden
Direkt zum Seiteninhalt
Scan QR or Download Android App

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.

Die ZIP-Datei laden, entpacken und den jeweilig benötigten Code entsprechend in die Bereiche der Webseite einbinden. 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!

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">

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.
Demo-Bild
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>
<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>

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.

Das Bild wird in Sekunden aktualisiert.
Startcode im <BODY> Tag
onload="startCounter();reFresh();"

Wer nicht mit Website X5 arbeitet:
<body onload="startCounter();reFresh();">
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> 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.
Logo HTML5
Button Spenden

© 2009 - 2018





Besucher Statistik
» 1 Online
» 441 Heute
» 552 Gestern
» 1502 Woche
» 8734 Monat
» 63277 Jahr
» 309855 Gesamt
Record: 1420 (10.04.2014)
Zurück zum Seiteninhalt