How to change the image on mouse hover on a div using jquery - Refactoring

Question

I have the below code which has the progress image on the img tag. I have 4 div below that. On mouse hover of a div, I am changing the image accordingly. I have achieved this using jQuery. But I have to achieve this by using the image path in the jQuery file. Is there any other alternative approach to achieve this without using image path in jQuery file. ( using show/hide ) or any other best approach to show images dynamically on hover. My intention is to remove the image path from the jQuery file.

$(document).ready(function() {

  $("#image1").mouseover(function() {
    $("#srcImage").attr('src', 'assets/images/progress.svg');
  });
  $("#image2").mouseover(function() {
    $("#srcImage").attr('src', 'assets/images/progressOne.svg');
  });
  $("#image3").mouseover(function() {
    $("#srcImage").attr('src', 'assets/images/progressTwo.svg');
  });
  $("#image4").mouseover(function() {
    $("#srcImage").attr('src', 'assets/images/progressThree.svg');
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="imageContent">
  <img src='assets/images/progress.svg' id="srcImage" />
</div>

<div class="row">
  <div class="col-lg-3" id="image1">
    Step 1
  </div>
  <div class="col-lg-3" id="image2">
    Step 2
  </div>
  <div class="col-lg-3" id="image3">
    Step 3
  </div>
  <div class="col-lg-3" id="image4">
    Step 4
  </div>
</div>
</div>

Answer 1

You can follow below code where you can keep image source to replace on hover event instead of mouseover event with div data attribute because mouseover keep firing whenever mouse pointer get moved and it will keep replacing images unecessary Add image class to each div and attach hover event handler for each div with class image and read its data attribute to replace in srcIamge

This way you don't need to update your jquery script when you add / remove any step div.

NOTE: I have given 50px height to div with background color to identify the each div separately.

$(document).ready(function() {
  $(".row div.image").hover(function() {
    console.log($(this).data('img'));
    $("#srcImage").attr('src', $(this).data('img'));
  }, function(){
    console.log('hover out');
  });
})

.image {
  padding: 10 10 10 10;
  background-color: blue;
  height: 50px;
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="imageContent">
  <img src='assets/images/progress.svg' id="srcImage" />
</div>

<div class="row">
  <div class="col-lg-3 image" id="image1" data-img="assets/images/progress.svg">
    Step 1
  </div>
  <div class="col-lg-3 image" id="image2" data-img="assets/images/progressOne.svg">
    Step 2
  </div>
  <div class="col-lg-3 image" id="image3" data-img="assets/images/progressTwo.svg">
    Step 3
  </div>
  <div class="col-lg-3 image" id="image4" data-img="assets/images/progressThree.svg">
    Step 4
  </div>
</div>