Javascript Tıklayınca Resim Gösterme
Merhabalar. Bir sorum var arkadaşlar. Aşağıda bir adet geniş, büyük bir resim var. Bu resmin aşağısında da dört küçük resim var. Aşağıdaki hangi resme tıklarsam o resim yukarıda görünecek. Aşağıdaki kodda "src" yi gösterebildim ama resmi gösteremedim.
<div id="yenieklenensliderbuyukresim">
</div>
<div class="yenieklenenslider">
<div value="" alt="">
<img class="yenieklenenresim" src='images/yenieklenenresim/1.jpg' type="button" onclick="tikla()">
</div>
<div value="" alt="">
<img class="yenieklenenresim" src='images/yenieklenenresim/2.jpg' type="button" onclick="tikla()">
</div>
<div value="" alt="">
<img class="yenieklenenresim" src='images/yenieklenenresim/3.jpg' type="button" onclick="tikla()">
</div>
<div value="" alt="">
<img class="yenieklenenresim" src='images/yenieklenenresim/4.jpg' type="button" onclick="tikla()">
</div>
</div>
function tikla() {
var sliderekle = document.querySelectorAll(".yenieklenenresim");
var slidergoster = document.getElementById("yenieklenensliderbuyukresim");
for(var x=0; x<sliderekle.length; x++) {
slidergoster.innerHTML = sliderekle[x].src;
}
}
Şu şekilde hallettim. Resime aşağıdaki kodu verdim.
onclick="resimdegistir(this.src)"
Script sayfasına da aşağıdaki kodu verdim.
const resimdegistir = src => {
document.getElementById('sliderbuyukresim').src = src;
}