JAVASCRIPT

js code to change a immage

<script type="text/javascript">
    function changeImage(a) {
        document.getElementById("img").src=a.src;
    }
</script>
<div id="main_img">
    <img id="img" src="1772031_29_b.jpg">
</div>
<div id="thumb_img">
    <img src='1772031_29_t.jpg'  onclick='changeImage("1772031_29_b.jpg");'>
    <img src='1772031_55_t.jpg'  onclick='changeImage("1772031_55_b.jpg");'>
    <img src='1772031_53_t.jpg'  onclick='changeImage("1772031_53_b.jpg");'>
</div>

changing photo with js

//ui
<form action="" method='post'>
  <img src="https://www.freeiconspng.com/uploads/no-image-icon-13.png" id="coverPreview" alt="">
  <input type="file" id="cover" />
</form>

//css
input{
  display:none;
}

//js
 let coverPreview = document.getElementById('coverPreview');
        let cover = document.getElementById('cover');

        coverPreview.addEventListener('click',_=>cover.click());

        cover.addEventListener("change",_=>{
            let file = cover.files[0];
            let reader = new FileReader();
            reader.onload = function (){
                coverPreview.src = reader.result;
            }
            reader.readAsDataURL(file);
        });