Show sourcecode
The following files exists in this folder. Click to view.
public_html/gamla-kurser/webbutv1/ovningar/
baskod.html
bentogrid.html
bilder/
css/
gimp_logga.html
index.html
js/
meny1/
meny2/
ovning-flexbox.html
ovning0.html
ovning00.html
ovning1.html
ovning10.html
ovning11.html
ovning12.html
ovning2.html
ovning3.html
ovning4.html
ovning5.html
ovning6.html
ovning6b.html
ovning7.html
ovning8a.html
ovning8b.html
ovning9a.html
ovning9b.html
ovning9c.html
ovning9d.html
sida2.html
ovning12.html
125 lines UTF-8 Windows (CRLF)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>trafikljus</title>
<style>
body {
font-family: Calibri, Verdana, Geneva, sans-serif;
}
.container {
background-color: #DDD;
width: 300px;
margin: auto;
border: 1px solid #aaa;
padding: 10px;
}
#widebutton {
width: 100%;
cursor: pointer;
}
#red {
background-color: #F00;
padding: 5px;
margin: 2px;
}
#yellow {
background-color: #FF0;
padding: 5px;
margin: 2px;
}
#green {
background-color: #0F0;
padding: 5px;
margin: 2px;
}
#trafikljus {
background-color: gray;
}
</style>
<script>
window.onload = function() {
var red = document.getElementById("red");
var yellow = document.getElementById("yellow");
var green = document.getElementById("green");
var widebutton = document.getElementById("widebutton");
var trafikljus = document.getElementById("trafikljus");
var test1 = document.getElementById("test1");
var test2 = document.getElementById("test2");
var test3 = document.getElementById("test3");
var testimg = document.getElementById("testimg");
widebutton.onclick = function() {
if (trafikljus.style.display == "none") {
trafikljus.style.display = "block";
red.style.display = "block";
yellow.style.display = "block";
green.style.display = "block";
} else
trafikljus.style.display = "none";
}
red.getElementsByTagName("button")[0].onclick = function() {
red.style.display = "none";
}
yellow.getElementsByTagName("button")[0].onclick = function() {
yellow.style.display = "none";
}
green.getElementsByTagName("button")[0].onclick = function() {
green.style.display = "none";
}
test1.onmouseover = function() {
testimg.src = "./bilder/trafikljus-red-blink.gif";
}
test2.onmouseover = function() {
testimg.src = "./bilder/trafikljus-yellow-blink.gif";
}
test3.onmouseover = function() {
testimg.src = "./bilder/trafikljus-green-blink.gif";
}
test1.onmouseout = function() {
testimg.src = "./bilder/trafikljus-start.gif";
}
test2.onmouseout = function() {
testimg.src = "./bilder/trafikljus-start.gif";
}
test3.onmouseout = function() {
testimg.src = "./bilder/trafikljus-start.gif";
}
}
</script>
</head>
<body>
<div class="container">
<h1><img id="testimg" src="./bilder/trafikljus-start.gif" width="120" height="90" alt="trafikljus">TRAFIKLJUS</h1>
<button id="widebutton">Test av och på</button>
<div id="trafikljus">
<div>
<h3>RÖTT STOPP</h3>
<p id="red"><button>Stäng</button> Fot på broms, avvakta uppmärksamt <span id="test1">(lamptest)</span></p>
</div>
<div>
<h3>GULT AVVAKTA</h3>
<p id="yellow"><button>Stäng</button> Stanna om du hinner. Man ska ej köra på gult <span id="test2">(lamptest)</span></p>
</div>
<div>
<h3>GRÖNT KÖR</h3>
<p id="green"><button>Stäng</button> Kör på, men skaffa dig info att vägen är klar. <span id="test3">(lamptest)</span></p>
</div>
</div>
</div>
</body>
</html>