Vytvořte HTML stránku s vánočním stromečkem s pomocí následujícího kódu.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vánoční stromeček</title>
<style>
.kontejner {
position: relative;
}
img {
position: absolute;
width: 400px;
}
button {
position: absolute;
border-radius: 50%;
width: 40px;
height: 40px;
border: 0;
}
#koulicka1 {
background-color: blue;
top: 30px;
left: 150px;
}
</style>
</head>
<body>
<h1>Stromeček</h1>
<div class="kontejner">
<img src="strom.jpg" alt="Stromeček">
<button id="koulicka1" class="koulicka"></button>
</div>
</body>
</html>
Použít můžete tento stromeček, nebo si nakreslete svůj dle libosti. https://krouzek.epavel.eu/wp-content/uploads/2021/12/strom.jpg
Umístěne na stromek více barevných kouliček a nezapomeňte změnit id:
<button id="koulicka2" class="koulicka"></button>
Každá koulička by měla mít odpovídající styl svázaný pomocí jedinečného id:
#koulicka2 {
top: 200px;
left: 200px;
background-color: sandybrown;
}
Poté vytvořte další tlačítka na zhasnutí a rozsvícení stromečku. Zhasnutí budeme provádět pomocí stylu visibility:
https://www.w3schools.com/cssref/pr_class_visibility.asp
Tlačítko na zhasnutí:
<button id="off" onclick="zhasni()">Zhasni</button>
Nezapomeňte tlačítku vytvořit styl s vhodnou pozicí (třeba pod stromečkem).
Vložte také tlačítko na Rozvícení.
Javascriptový kód s funkcemi na zhasnutí a rozsvícení:
<script>
function zhasni() {
var koulicky = document.getElementsByClassName("koulicka");
for (var i = 0; i < koulicky.length; i++) {
koulicky[i].style.visibility = "hidden";
}
}
function rozsvit() {
var koulicky = document.getElementsByClassName("koulicka");
for (var i = 0; i < koulicky.length; i++) {
koulicky[i].style.visibility = "visible";
}
}
</script>
Zkuste místo dvou funkcí: zhasni(), rozsvit() napsat jen jednu s parametrem: zmenViditelnost(parametr)
Jako bonus si můžete ke stromečku přidat sněžení:
<script src="https://piskvorky.epavel.eu/script/snow.js"></script>