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 |