
After Width: | Height: | Size: 4.4 KiB |
After Width: | Height: | Size: 131 KiB |
After Width: | Height: | Size: 306 KiB |
After Width: | Height: | Size: 126 KiB |
After Width: | Height: | Size: 96 KiB |
After Width: | Height: | Size: 145 KiB |
After Width: | Height: | Size: 73 KiB |
After Width: | Height: | Size: 78 KiB |
After Width: | Height: | Size: 177 KiB |
After Width: | Height: | Size: 191 KiB |
After Width: | Height: | Size: 130 KiB |
After Width: | Height: | Size: 111 KiB |
After Width: | Height: | Size: 319 KiB |
After Width: | Height: | Size: 297 KiB |
After Width: | Height: | Size: 207 KiB |
After Width: | Height: | Size: 344 KiB |
After Width: | Height: | Size: 205 KiB |
After Width: | Height: | Size: 323 KiB |
After Width: | Height: | Size: 73 KiB |
After Width: | Height: | Size: 212 KiB |
After Width: | Height: | Size: 61 KiB |
After Width: | Height: | Size: 93 KiB |
After Width: | Height: | Size: 51 KiB |
After Width: | Height: | Size: 88 KiB |
After Width: | Height: | Size: 71 KiB |
After Width: | Height: | Size: 205 KiB |
After Width: | Height: | Size: 336 KiB |
After Width: | Height: | Size: 142 KiB |
After Width: | Height: | Size: 189 KiB |
After Width: | Height: | Size: 124 KiB |
After Width: | Height: | Size: 177 KiB |
After Width: | Height: | Size: 190 KiB |
After Width: | Height: | Size: 62 KiB |
After Width: | Height: | Size: 120 KiB |
After Width: | Height: | Size: 142 KiB |
After Width: | Height: | Size: 33 KiB |
After Width: | Height: | Size: 193 KiB |
After Width: | Height: | Size: 217 KiB |
After Width: | Height: | Size: 245 KiB |
After Width: | Height: | Size: 206 KiB |
After Width: | Height: | Size: 177 KiB |
After Width: | Height: | Size: 108 KiB |
After Width: | Height: | Size: 121 KiB |
@ -0,0 +1,120 @@ |
|||||
|
<!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> |