Hier poppt die WebCam als Videoclip up : Klick
Dieser Beitrag wurde vor mehreren Jahren geschrieben. Beachten Sie einfach, dass durch Browser und andere Programme oder Plugins Popups zunehmend geblockt werden. Eventuell haben Sie das bereits beim Laden dieser Seite gemerkt. Sie sollten deshalb bei Ihrer Darstellung nie allein auf Popup - Fenster setzen. Zum Thema selbst:
Besonders durch unerwünschte Popup - Werbefenster oder ganze Popunder - Websites ( das sind Seiten, die man nie bestellt hat, die sich aber im Hintergrund laden und nach dem Schließen der gewünschten Seiten einfach öffnen . Natürlich verbrauchen sie dabei Ressourcen und verlangsamen den Download der nützlichen Seiten. Typisch sind sie auch für viele Webcam - Topp - Listen. Sicher ist es auch Ihnen schon passiert, dass sich unbestellt ein Fenster nach dem anderen geöffnet hat - sie konnten nur noch mit der Firewall bremsen und blockieren. Klar, werden Besucher dadurch belästigt oder verärgert, auch wenn ich durchaus Verständnis für Werbung aufbringen kann.
Unsere Homepage können wir aber durchaus durch die gezielte Einbindung einiger dieser Elemente attraktiver und dynamischer gestalten, da wir selbst wissen, was unser Besucher tatsächlich thematisch erwartet ( sonst würde er ja nicht den Weg zu uns suchen ). Ich erläutere hier einige Beispiele, die ich mit wenigen Veränderungen selbst auf meiner Homepage einsetze.
Das Prinzip : Durch einen Klick auf einen Link ( als Text oder Bild ), durch fahren mit der Maus über einen Link ( hovern ), selbstständig beim Laden oder beim Schließen der Seite, nach einer festgelegten Zeit usw. öffnet sich ein (zusätzliches ) Browserfenster, dessen Größe, Inhalt und sogar Anzeigedauer Sie bestimmen können.
Wir verwenden natürlich das Bild unserer Webcam, ggf. mit etwas Umrahmung, als Inhalt dieser Fenster. Das kann ein durch FTP - Upload realisiertes, sich ständig erneuerndes Bild, der Livestream Ihrer Kamera, ein kurzer Videoclip oder auch nur ein Offline - Bild mit einem Hinweis sein. Ganz deutlich: alles, was eben auf einer "normalen" HTML - Seite möglich ist, können wir auch in einem Popup darstellen lassen.
1. Eine einfache Möglichkeit mit Javascript, die nur das letzte Webcam - Bild darstellt, zeige ich zuerst. Dazu klicken Sie hier zur Demonstration. Durch einen zweiten Klick auf eine beliebige Stelle der Seite schließt sich dieses Fenster wieder. Nachteil: Das Javascript funktioniert nur im Internet Explorer.
Erstellen Sie, wie gewohnt, Ihre HTML - Seite. Zur Realisierung des Popup sind lediglich zwei Stellen Ihres Quelltextes zu bearbeiten ( dazu können Sie wiederum Notepad, auf jedem Windows-Rechner vorhanden, verwenden ). Das Javascript zum Erzeugen des Fensters fügen Sie in den Header Ihrer Seite zwischen Abschluss-Tag des Titels </title> sowie den Abschluss-Tag des Header </head> ein:
<script language="JavaScript">
var oPopup = window.createPopup();
function openPopup()
{
var oPopBody = oPopup.document.body;
oPopBody.innerHTML = "<div style='position:absolute; top:0; left:0; " +
"width:320px; height:240px; " + "background : background;> " +
"<hr size='0'>" + " <img src='http://www.ihre_domain/video/webcam.jpg'></div>"
oPopup.show(100, 100, 320, 240, document.body);
}
</SCRIPT>
Das Javascript könne Sie ohne Änderung übernehmen, lediglich den Pfad zu Ihrem Webcam - Bild sollten Sie anpassen.
Dann markieren Sie sich das Element der Seite, bei dem sich durch Anklicken das Popup-Fenster öffnen soll, im Body. Das kann Text/ein Wort Ihres Textes oder auch ein Bild/Icon sein. Im oben aufgeführten Test ist es das Wort "hier", das ich extra für Sie markiert habe. Suchen Sie dieses Wort in Ihrem Quelltext. Davor fügen Sie ein
<a onclick="openPopup();"> und danach </a>, so dass die gesamte Phrase wie folgt aussieht:
<a onclick="openPopup();">hier</a>
Speichern Sie die Seite unter Berücksichtigung des Formates ( html bzw. htm ). Dann öffnen Sie die Seite nochmals mit Ihrem HTML - Editor und heben dieses Wort durch Farbe und Unterstreichung hervor ( so, wie Ihre übrigen Links aussehen ).
Analog können Sie anstelle des
Wortes ein Bild einsetzen, z.B. so -
.
Klicken Sie einfach drauf. Dazu verbleibt das bereits im Header
befindliche Javascript an Ort und Stelle, Ihre Phrase im Body sollte dann so aussehen:
<a onclick="openPopup();"><img border="0" src="mein_bild.jpg" width="50" height="61"></a>
Auch das testen Sie anschließend in Ihrem HTML - Editor und verschönern eventuell Ihren für den Besucher sichtbaren Bereich. Hier können Sie auch die Bildgröße und gegebenenfalls Schriftart und -größe nochmals korrigieren. Testen Sie die Seite auch immer offline mit Ihrem Browser. Dann erst schicken Sie die Seite und das als Popup - Button verwendete Bild auf Ihren HOST - Server. Oft gibt es unterschiedliche Anzeigen bzw. Reaktionen im (Wysiwyg-) Editor gegenüber den unterschiedlichen Browsertypen.
