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.
120 lines
3.6 KiB
120 lines
3.6 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
|
<style>
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="row">
|
|
<div class="col-sm-2 card ram" id="1" style="width: 20rem;">
|
|
<img src="..." class="card-img-top" alt="...">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Card title</h5>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-2 card ram" id="2" style="width: 20rem;">
|
|
<img src="..." class="card-img-top" alt="...">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Card title</h5>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-2 card ram" id="3" style="width: 20rem;">
|
|
<img src="..." class="card-img-top" alt="...">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Card title</h5>
|
|
</div>
|
|
</div></div>
|
|
|
|
<div class="row" id="obrazky" ></div>
|
|
|
|
|
|
|
|
<script>
|
|
let popisky = [
|
|
'Dřevo',
|
|
'Les',
|
|
'Oblaka',
|
|
'Stavba',
|
|
'Vlasy',
|
|
'Tráva',
|
|
'Cesta',
|
|
'Ukazatel',
|
|
'Cesta 2',
|
|
'Pes',
|
|
'Pavučina',
|
|
'Tráva 2',
|
|
'Kmen',
|
|
'Kanál',
|
|
'Strom',
|
|
'Hory',
|
|
'Podzim',
|
|
'Koleje',
|
|
'Zima',
|
|
'Fotograf',
|
|
'Mlha',
|
|
'Větrník',
|
|
'Pavučina 2',
|
|
'Mlha 2',
|
|
'Kopce',
|
|
'Podzim 2',
|
|
'Kmen 2',
|
|
'Pes 2',
|
|
'Údolí',
|
|
'Hory 2',
|
|
'Podzim 3',
|
|
'Mlha 3',
|
|
'Zima 2',
|
|
'Mlha 4',
|
|
'Kameny',
|
|
'Cesta 3',
|
|
'Kmen 3',
|
|
'Stavení 2',
|
|
'Žebřík',
|
|
'Zima 3',
|
|
'Skála',
|
|
'Pavučina 2',
|
|
];
|
|
|
|
let obrazky = document.querySelector("#obrazky");
|
|
let text = document.querySelector("#text")
|
|
|
|
for (let index = 0; index < popisky.length; index++) {
|
|
const element = popisky[index];
|
|
|
|
let cislo = index + 1;
|
|
if (cislo < 10) {
|
|
cislo = '0' + cislo;
|
|
}
|
|
obrazky.innerHTML += '<div class="col-sm-2"><div class="card" data-img="img/image_' + cislo + '.jpg" style="width: "> <img src="img/image_' + cislo + '.jpg" alt=""> <div class="card-body"> <p class="card-text">' + element + '</p> </div></div></div>';
|
|
|
|
}
|
|
let karty = document.querySelectorAll(".card")
|
|
for (let index = 0; index < karty.length; index++) {
|
|
const element = karty[index];
|
|
console.log(karty)
|
|
element.addEventListener("click",function () {
|
|
let aktiv = document.querySelector(".activ img")
|
|
aktiv.setAttribute("src",this.dataset.img)
|
|
|
|
|
|
})
|
|
}
|
|
let ram =document.querySelectorAll(".ram")
|
|
for (let index = 0; index < ram.length; index++) {
|
|
const element = ram[index];
|
|
element.addEventListener("click",function () {
|
|
this.classList.add("activ")
|
|
|
|
})
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|