html-datei-ueber-andere-einblenden.php
Quell Code
<!DOCTYPE html>
<html>
<head>
<title>Webcams aus meiner Stadt mit Laufschrift als html Datei</title>
<meta charset="UTF-8">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.box{
height:100vh;
width:100vw;
display:flex;
flex-direction:column;
}
.line{
display:flex;
}
.linetop{
flex:2;
}
.linebottom{
flex:1;
}
#kamera1{
flex:2;
height:calc(100% - 22px);
}
.column{
display:flex;
flex:1;
flex-direction:column;
}
.line .unten{
flex:1;
}
.small .frame{
flex:1;
}
iframe{
width:100%;
height:100%;
}
.frame{
display:flex;
flex-direction:column;
}
h3{
background:lightgrey;
}
h3:hover{
background:green;
cursor:pointer;
}
</style>
</head>
<body>
<div class="box">
<div class="line linetop">
<div id="kamera1">
<h3 id="bigtext">Kamera Live Markt</h3>
<iframe id="big" src="https://webcam.minden-wlan.de:10000/axis-cgi/mjpg/video.cgi?resolution=800x450&dummy=1645396238487"></iframe>
</div>
<div class="small column">
<div class="frame">
<h3>Kamera Live Hagemeyer</h3>
<iframe id="kamera2" src="https://www.hagemeyer.de/fileadmin/webcam/current.jpg"></iframe>
</div>
<div class="frame">
<h3>Kamera Live kantlersweide</h3>
<iframe id="kamera3" src="http://webcam2.minden-wlan.de:10000/axis-cgi/mjpg/video.cgi?resolution=800x450&dummy=1645396183951"></iframe>
</div>
</div>
</div>
<div class="line linebottom">
<div class="frame unten">
<h3>Kamera Eingang </h3>
<iframe id="kamera4" src="https://cam.mwpw.de/cam1.jpg"></iframe>
</div>
<div class="frame unten" id="kamera5">
<h3>Porta westfalica berg </h3>
<iframe id="kamera5" src="https://cam.mwpw.de/cam3.jpg"></iframe>
</div>
<div class="frame unten">
<h3>Porta westfalica berg </h3>
<iframe id="kamera6" src="https://cam.mwpw.de/cam2.jpg"></iframe>
</div>
</div>
</div>
<script>
bu=document.querySelectorAll('h3');
bu.forEach((u)=>{
u.addEventListener('click',function(){
let text=u.innerHTML;
let alttext=document.getElementById('bigtext').innerHTML; document.getElementById('bigtext').innerHTML=text;
u.innerHTML=alttext;
var neu=u.nextElementSibling.getAttribute('src');
var alt=document.getElementById('big').getAttribute('src');
var id=u.nextElementSibling.getAttribute('id');
u.nextElementSibling.setAttribute('src',alt);
console.log('alt '+alt); //document.getElementById('big').setAttribute('src','');
console.log('neu '+neu);
document.getElementById('big').setAttribute('src',neu);
});
})
</script>
<object id="obj_dateilesen" data="text-von-php-erstell.php" type="text/html"></object>
<script>
window.onload = function () {
var object = document.querySelector('#obj_dateilesen');
var doc = object.contentDocument;
doc.documentElement.style.overflow = 'hidden';
doc.body.style.overflow = 'hidden';
var contentsHeight = doc.documentElement.offsetHeight;
object.style.height = '100vh';
object.style.width='100vw';
object.style.position='absolute';
object.style.top=0;
object.style.left=0;
p=doc.querySelector('p');
let st = document.createElement("style");
let vorp = p.parentNode
st.innerHTML='p { background:rgba(0,0,0,0); filter: blur(0.08em); margin: 0 auto; width:40%; padding:10px; overflow: hidden; position:absolute; top:0; left:0; color: lime; animation:lauf 10s linear infinite;}@keyframes lauf{ 0%{ top:120vh; } 100%{ top:-140vh; }}';
vorp.insertBefore(st, p)
}
</script>
</body>
</html>