You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
3.4 KiB
86 lines
3.4 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>Koloběh vody</title>
|
|
<link rel="stylesheet" href="css/bootstrap.css">
|
|
<link rel="stylesheet" href="css.css">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<img class="cyklus" id="part-1" data-next="part-2" src="image/part-1.jpg" alt="" >
|
|
</div>
|
|
<div class="col-md-4">
|
|
<p class="cyklus" id="part-1-text" data-next="part-2-text">Voda se vypařuje.</p>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<img class="cyklus " id="part-2" data-next="part-3" src="image/part-2.jpg" alt="">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<p class="cyklus" id="part-2-text" data-next="part-3-text">Sluneční paprsky ji přeměňují na vodní páru, která vstoupá vzhůru.</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<img class="cyklus" id="part-3" data-next="part-4" src="image/part-3.jpg" alt="">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<p class="cyklus" id="part-3-text" data-next="part-4-text">Vysoko nad zemí se vodní pára ochlazuje a mění se na kapky vody</p>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<img class="cyklus" id="part-4" data-next="part-5" src="image/part-4.jpg" alt="">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<p class="cyklus" id="part-4-text" data-next="part-5-text">Tak se vytvářejí mraky. Kapky se spojují do velkých vodních kapek a nebo ledových krystalků.</p>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<img class="cyklus" id="part-5" data-next="part-1" src="image/part-5.jpg" alt="">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<p class="cyklus" id="part-5-text" data-next="part-1-text">Jakmile jsou už dost těžké, spadnou na zem jako srážky (déšť, sníh, kroupy).</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
function cyklusClick() {
|
|
console.log(this);
|
|
this.classList.toggle("hide")
|
|
let nextImg = document.getElementById(this.dataset["next"]);
|
|
console.log(nextImg);
|
|
nextImg.classList.toggle("hide");
|
|
}
|
|
|
|
let images = document.querySelectorAll('img.cyklus');
|
|
for (let index = 0; index < images.length; index++) {
|
|
const element = images[index];
|
|
element.addEventListener("click", cyklusClick);
|
|
|
|
}
|
|
let body = document.querySelector("body");
|
|
body.style.backgroundImage = "url(image/" + this.dataset["next"] + "-back.jpg)";
|
|
|
|
let thisText = document.getElementById(this.getAttribute("id") + "-text");
|
|
thisText.classList.toggle("hide");
|
|
let nextText = document.getElementById(this.dataset["next"] + "-text");
|
|
nextText.classList.toggle("hide");
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|