< >

webcams-in-iframe.html


Quell Code


<!DOCTYPE html>
<html>
<head>
<title>LiveVideo</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 Tank</h3>
          <iframe  id="big" src="http://images.webcams.travel/original/209f5a031e6296d1fb1db6f67cdca494/1404941415.jpg?token=2Esl0INiWc1"></iframe>
      </div>
  
  
      <div class="small column">
          <div class="frame">
               <h3>Kamera Live Trocknung</h3>
               <iframe  id="kamera2" src="https://archive.panoramablick.com/archive/30349/2019/11/21/16/10-lowres.jpg"></iframe>
          </div>
          <div class="frame">
               <h3>Kamera Live Keller</h3>
               <iframe  id="kamera3" src="http://www.hagemeyer.de/fileadmin/webcam/current.jpg"></iframe>
          </div>
      </div>
</div>
  
  
  
<div class="line linebottom">
  <div class="frame unten">
         <h3>Kamera Eingang </h3>
         <iframe id="kamera4" src="https://archive.panoramablick.com/archive/29122/2019/11/20/16/25.jpg"></iframe>
  </div>
  <div class="frame unten" id="kamera5">
         <h3>Kamera Parkplatz </h3>
         <iframe id="kamera5" src="http://images.webcams.travel/original/209f5a031e6296d1fb1db6f67cdca494/1404941415.jpg?token=2Esl0INiWc1"></iframe>
  </div>
  <div class="frame unten">
         <h3>Kamera Ventilknoten  </h3>
         <iframe id="kamera6" src="https://archive.panoramablick.com/archive/30047/2019/11/20/16/25.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>
</body>
</html>