Jak to zrobić w prosty sposób zeby po kliknięci na każdy Link otwierał się w osobnym DIV obrazek [jak zrobić dodatkowo żeby zamiast linka Kliknij1 był obrazek <img> nie działa]
Coś mi nie wychodzi, otwiera mi ciągle ten sam obrazek
Zeby nie rozbudowywać funkcji bo mam tych obrazków ponad 20
Może jest jakoś prostrzy sposób?
Mam 20 zdjęć i chcę żeby wyświetlane były na stronie a po kliknięciu na każde otwierało mi zdęcie w nowym przyciemnionym DIVie
<style>
.dropdown {
float: left;
overflow: hidden;
cursor: pointer;
}
.dropdown-content {
display: none;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
position: fixed;
margin-top: 3.0em;
z-index: 2;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
a:hover, .dropdown:hover {
background-color: #acc;
color: black;
cursor: pointer;
}
.show {
display: block;
}
</style>
</head>
<a onclick="myFunction()" class="dropbtn">kliknij1 </a>
<div id="myDropdown" class="dropdown-content">
<img src="10.jpg" width="300">
<a href="#" class="tablinks">[zamknij]</a>
</div>
<a onclick="myFunction()" class="dropbtn"> kliknij2</a>
<div id="myDropdown" class="dropdown-content">
<img src="11.jpg" width="300">
<a href="#" class="tablinks">[zamknij]</a>
</div>
<a onclick="myFunction()" class="dropbtn"> kliknij3</a>
<div id="myDropdown" class="dropdown-content">
<img src="12.jpg" width="300">
<a href="#" class="tablinks">[zamknij]</a>
</div>
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
Zrobiłem jeszcze jak ponzej ale czy da się to jakoś uprościc dla wielu obrazków?
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.w3-container,.w3-panel{padding:0.01em 16px}
.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w3-display-topright{position:absolute;right:0;top:0}
.w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
</style>
<body>
<div class="w3-container">
<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black"><img src="01.jpg" width="100"></button>
<button onclick="document.getElementById('id02').style.display='block'" class="w3-button w3-black"><img src="02.jpg" width="100"></button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p><img src="01.jpg" width="100%"></p>
<p></p>
</div>
</div>
</div>
<div id="id02" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span onclick="document.getElementById('id02').style.display='none'" class="w3-button w3-display-topright">×</span>
<p><img src="02.jpg" width="100%"></p>
</div>
</div>
</div>
</div>
</body>
</html>
Ten post edytował david8213 11.03.2020, 12:53:51
[Java][PHP]Wyświetlanie obrazka w osobnym DIVie
11.03.2020, 12:17:11
david8213 [Java][PHP]Wyświetlanie obrazka w osobnym DIVie 11.03.2020, 12:17:11 
