petr
4 years ago
|
After Width: | Height: | Size: 277 KiB |
|
After Width: | Height: | Size: 128 KiB |
@ -0,0 +1,64 @@ |
|||||
|
<!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> |
||||
|
</head> |
||||
|
<style> |
||||
|
ul{ |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
list-style-type: none; |
||||
|
} |
||||
|
ul img{ |
||||
|
width: 100px; |
||||
|
height: 100px; |
||||
|
} |
||||
|
.foto img{ |
||||
|
width: 100%; |
||||
|
} |
||||
|
.nahled{ |
||||
|
width: 120px; |
||||
|
float: left; |
||||
|
} |
||||
|
.foto{ |
||||
|
width: 70%; |
||||
|
float: right; |
||||
|
} |
||||
|
ul li a { |
||||
|
opacity: 0.5; |
||||
|
} |
||||
|
ul li a:hover { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
</style> |
||||
|
<body> |
||||
|
<h1>galerie</h1> |
||||
|
<div class="nahled"> |
||||
|
<ul> |
||||
|
<li><a href="#" data-img="vyst.PNG"><img src="vyst.png"></a></li> |
||||
|
<li><a href="#" data-img="wtl 19.2..PNG"><img src="wtl 19.2..png"></a></li> |
||||
|
<li><a href="#" data-img="3333.PNG"><img src="3333.png"></a></li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
<div class="foto"> |
||||
|
<img src="vyst.PNG"> |
||||
|
|
||||
|
</div> |
||||
|
<script> |
||||
|
let odkazy = document.querySelectorAll("ul li a"); |
||||
|
for (let i = 0; i < odkazy.length; i++) { |
||||
|
const a = odkazy[i]; |
||||
|
a.addEventListener("click", function(){ |
||||
|
console.log(this.dataset); |
||||
|
let img = document.querySelector(".foto img"); |
||||
|
img.setAttribute("src", this.dataset); |
||||
|
}); |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
</body> |
||||
|
</html> |
||||
|
After Width: | Height: | Size: 237 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 75 KiB |
|
After Width: | Height: | Size: 45 KiB |
|
After Width: | Height: | Size: 23 KiB |