Fernseher HTML

Nach unten

Fernseher HTML

Beitrag von W3isserWolf am Mo Feb 05, 2018 11:10 am

index.html
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fernseher</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<body>

<h1> Fernseher </h1>

<div id="button1"> ARD </div>
<div id="button2"> ZDF </div>
<div id="button3"> WDR </div>
<br/>

<iframe id="Fenster" src="http://www.daserste.de/live/index.html"></iframe>


<script src="myscript.js"></script>


</body>


</html>

myscript.js
Code:

document.addEventListener('DOMContentLoaded', init);


function init()
{
 document.getElementById('button1').addEventListener('click', ARD);
 document.getElementById('button2').addEventListener('click', ZDF);
 document.getElementById('button3').addEventListener('click', WDR);
}

function ARD(event)
{
document.getElementById("Fenster").src = "http://www.daserste.de/live/index.html";
}

function ZDF(event)
{
document.getElementById("Fenster").src = "https://www.zdf.de/live-tv";
}

function WDR(event)
{
document.getElementById("Fenster").src = "https://www1.wdr.de/mediathek/video/live/index.html";
}

mystyle.css
Code:
h1
{
 color: blue;
 background-color: black;
 border-style: solid;
 border-radius: 10px;
 border-width: 2px;
 border-color: black;
 text-align: center;
}


body
{
 background-color: lightblue;
}


#button1
{
 height: 70px;
 width: 200px;
 color: black;
 margin-left: 5%;
 margin-top: 15px;
 background-color: red;
 border-style: solid;
 border-radius: 10px;
 border-width: 2px;
 border-color: black;
 cursor: pointer;
 text-align: center;
 float: left;
}


#button2
{
 height: 70px;
 width: 200px;
 color: black;
 margin-top: 15px;
 background-color: red;
 border-style: solid;
 border-radius: 10px;
 border-width: 2px;
 border-color: black;
 cursor: pointer;
 text-align: center;
 margin-left: 5%;
 float: left;
}


#button3
{
 height: 70px;
 width: 200px;
 color: black;
 margin-top: 15px;
 background-color: red;
 border-style: solid;
 border-radius: 10px;
 border-width: 2px;
 border-color: black;
 cursor: pointer;
 text-align: center;
 margin-left: 5%;
 float: left;
}


#Fenster
{
 color: green;
 height: 600px;
 width: 800px;
 margin-top: 100px;
 border-style: solid;
 border-radius: 10px;
 border-width: 2px;
 border-color: red;
 margin-left: 5%;
}

W3isserWolf
Admin

Anzahl der Beiträge : 4
Anmeldedatum : 03.02.18
Alter : 19
Ort : Steinfurt

Benutzerprofil anzeigen http://Hagenberger.me

Nach oben Nach unten

Nach oben


 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten