webcambild als tabellenhintergrund

topper23

New member
Hallo zusammen,

folgendes habe ich versucht zu realisieren: Ich möchte alle paar Sekunden ein webcambild als hintergrundbild einer tabelle aktualisieren, damit ich eine teilweise transparente gif Grafik, einen runden Bildschirm, darüber legen kann.

Das bild ist als hintergrund im Tabellenkopf eingebunden:
<TABLE id="tvbild" style="background-image:url(http://kreuzburg.dyndns.org:8000)">

Die Funktion, die ich mir zusammengebastelt habe sieht so aus:
function reloadCam()
{reload = new Date();
reload = "?"+reload.getTime();
scree = new Image();
scree.src = "http://kreuzburg.dyndns.org:8000"+reload;
tvbild.style.backgroundImage ='url(scree.src)';
setTimeout("reloadCam()", 3000); // zeit-in-ms
}

Diese Funktion lädt zwar alle drei Sekunden das Bild neu, zeigt es aber nicht an. Dat janze ist online unter:
http://kreuzburg.shamelips.de/kreuzburg/fernseher.html

Die Webcam ansich funktioniert aber:
http://kreuzburg.shamelips.de/kreuzburg/test.htm

Wäre echt cool, wenn jemand eine Idee hätte, wie man alle drei Sekunden das webcam bild vorladen kann, um es dann gegen das Hintergrundbild auszutauschen. Vielen Dank erst mal für die Aufmerksamkeit
Viele Grüße
Topper
 
So wie's aussieht, ist Dein Fernseher nicht transparent.
Offensichtlich lädt die Seite alle 3 Sekunden.
Das ist auch nicht so einfach mit Transparenz bei Bildern.
Solltest vielleicht besser CSS-Filter ausprobieren.
 
Lösung

Hallo Leute,

ick habs jeschafft,puh. Die Lösung ist schlichtweg zwei div layer übereinander gepackt, sieht dann so aus:

<!--Webcam overlay-->
<div style="position:absolute;left:397px;top:138px;visibility: visible"><IMG NAME="webcambild" SRC="http://kreuzburg.dyndns.org:8000"></div>
<div style="position:absolute;left:391px;top:119px;visibility: visible"><img src="tvscreen.gif" alt="Bildschirm Bild"></div>

und das webcambild wird dann mit diesem kleinen Javascript alle zwei sekunden neu vorgeladen und aktualisiert (enfach im body teil aufrufen):

<script LANGUAGE="Javascript"><!--
function reloadCam()
{reload = new Date();
reload = "?"+reload.getTime()
document.images["webcambild"].src = "http://kreuzburg.dyndns.org:8000"+reload
setTimeout("reloadCam()", 2000) // zeit-in-ms
}
//-->
</SCRIPT>

Ich danke euch für eure Hilfe, möchte noch kurz erwähnen, dass es sich echt lohnt auf div layer/css statt tabellen umzusteigen, ist soviel übersichtlicher und einfacher, echt gut.
Genug der Begeisterung - Frohet Fest dann
Topper
 
Zurück
Oben