How to change script to javascript?

Question

JavaScript

Help me please.
There is a script. Meaning, when hovering over a small image, a larger one is shown. The problem is that when the page loads, the larger image area is empty, how do I make sure that the first image is there when loading.

<div id="container">
    <div id="descr">Image Description</div>

    <div class="large_img"><img id="large_img" /></div>
    <br />

    <div class="small_img"><img src="thumbs/1.png" id="img_1" /></div>
    <div class="small_img"><img src="thumbs/2.png" id="img_2" /></div>
    <div class="small_img"><img src="thumbs/3.png" id="img_3" /></div>
    <div class="small_img"><img src="thumbs/4.png"  id="img_4"  /></div>
  </div>
  <!-- End container -->

  <script>
  $("#img_1").mouseover(function ()
  {
    $("#large_img").attr({src:'1.png'});
    $("#descr").html($("#img_1").attr('alt'));
  });

  $("#img_2").mouseover(function ()
  {
    $("#large_img").attr({src:'2.png'});
    $("#descr").html($("#img_2").attr('alt'));
  });

  $("#img_3").mouseover(function ()
  {
    $("#large_img").attr({src:'3.png'});
    $("#descr").html($("#img_3").attr('alt'));
  });

  $("#img_4").mouseover(function ()
  {
    $("#large_img").attr({src:'4.png'});
    $("#descr").html($("#img_4").attr('alt'));
  });
  </script>

Answer 1

$(document).ready(function(){
$("#large_img").attr('src',  $("#img_1").attr('src'));
});

Answer 2

You forgot to include "thumbs/"
or
https://jsfiddle.net/t4r8watu/ in the path