Eine bereits etwas erweiterte Variante mit JavaScript zeigt das zweite Beispiel. Hier möchten wir nicht nur das Bild der Webcam periodisch erneuern, sondern wir möchten an gleicher Stelle ein weiteres Bild darstellen oder eben auch aktualisieren lassen. Der Besucher soll also zwei unterschiedliche Bilder erhalten. Dieses Javascript funktioniert im Moment nur im Internet Explorer.
WebcamXP als Programm erlaubt den Upload bis zu 10 Bildern von verschiedenen Videoquellen gleichzeitig. Um den Refresh auf einer Seite anzuzeigen, könnte das Javascript entsprechend angepasst werden.
Im Beispiel sind wir jedoch bescheidener: wir bieten dem Besucher abwechselnd ein aktualisiertes Bild der Webcam und ein weiteres statisches Bild an. Das könnte ein Banner, aber auch Ihr eigenes Bild sein.
So sieht das in der Praxis aus, wobei im Offline - Status der Kamera wieder das zuletzt gesendete Webcam - Bild oder ein anderes statisches ( Offline - ) Bild verwendet werden könnte.
Hierzu verwende ich ein JavaScript, das ursprünglich für eine Bilder - Animation (neudeutsch : Slideshow)gedacht war, für unsere Webcam - Seite. Es erfüllt zwei Aufgaben gleichzeitig: das abwechselnde Darstellen von zwei Bildern und zusätzlich das automatische Erneuern jedes einzelnen Bildes.
1. Das Javascript für diese einfachste Variante fügen Sie in den Header der Webcam - HTML - Seite ein :
| <title>Mein Bildwechsler mit
JavaScript</title>
<SCRIPT LANGUAGE="JavaScript"><!-- </head> |
Versuchen Sie, im Quelltext die wichtigsten Parameter zu erkennen und zu verstehen. Das sind insbesondere die variablen zwei Bilder mit ihren relativen Pfaden "http://angelpage.dyndns.tv:8080/cam_1.jpg" und "http://angelpage.dyndns.tv:8080/cam_3.jpg". Als angehender Profi erkennen Sie jetzt bereits allein, dass beide Bilder direkt aus meinem Stream von webcamXP geholt werden. Sie erkennen wiederum die festgelegte Periodizität der Erneuerung des sichtbaren Bildes als "verzoegerung". Da hier als Variable "3000" eingetragen ist, wird das Bild alle 3000/1000 Sekunden = 3 Sekunden gewechselt und erneuert.
Ich habe die Demonstration auf meinen Server geschaltet, damit Sie die Dynamik erkennen. Im Offline-Status gibt es also nichts zu sehen. Es ist ja aber auch möglich, die Bilder von Webspace zu downloaden, wohin sie per FTP-Upload geschickt wurden. Dann würde im Offline-Status das jeweils letzte Bild stehenbleiben.
2. Damit bereits beim Lader der Webcam - HTML - Seite auch gleichzeitig ein erstes Bild aufgerufen wird, ergänzen wir den Body - Tag im Quelltext :
<body onLoad="if (document.images) animation()">
Vergleichen Sie dazu im Quelltext dieser Seite, die zum Erhalt einer größeren Übersicht im Quelltext und damit besseren Lesbarkeit für Sprechprogramme mit Cascading Style Sheets (CSS) gestaltet wurde. Die Festlegungen über den Hintergrund, die Schriftarten und -farben, die Link - Farben usw. sind bei mir also in eine externe CSS - Datei ausgelagert.
Falls Sie keine CSS verwenden, sieht Ihr Body - Tag natürlich etwas ausführlicher aus, z.B.
<body onLoad="if (document.images) animation()"
background="images/backround.jpg" style="background-attachment: fixed"
text="#FFFFFF" link="#00FF00" vlink="#00FF00" alink="#00FF00">
Auf jeden Fall aber gehört der String onLoad="if (document.images) animation()"
in diesen Tag.
3. Jetzt brauchen Sie nur noch festlegen, an welcher Stelle Ihrer HTML - Seite das dynamische Webcam -Bild zu sehen sein soll. Dazu fügen Sie an dieser Stelle die Zeichenfolge zum Aufrufen des ersten Webcam - Bildes in den Quelltext ein:
<img src="webcam/bild_1.jpg" name="angelpage" width="320" height="240">
Erkennbar ist aus dem relativen Pfad zum Bild, dass zuerst das Bild der Webcam "cam_1.jpg", das sich im Ordner "webcam" befindet, geladen werden soll. Natürlich können Sie auch diese Variante in jede beliebige andere HTML - Seite einfügen, egal, ob Inline - Frame, als Popup, im Briefpapier usw.>
