Pass variable to this.src

Question

I have the name of an image file generated in javascript and passed to the src of an image in HTML - this currently works.

I want to pass another image file as the onmouseover attribute of the image. (because my file name is dynamically generated I can't use hover in css).

        var new_source_for_image = "/prestashop_1.7.0.3/modules/se_daynight/img/" + file_name + ".png";
    });
});
</script>
{/literal}

<div id="visit_daynight">
    <div class="change_visit">
        <a href="#"><img id="visit_image" src="" width="350" height="350"></a>
    </div>
</div>

So i thought of adding another variable from a generated file name:

var new_source_for_image_with_glow = "/prestashop_1.7.0.3/modules/se_daynight/img/" + file_name + "_glow" + ".png";

and:

<a href="#"><img id="visit_image" src="" width="350" height="350" 
                onmouseover="this.src=???"
                onmouseout="this.src=???"></a>

But I don't know how to pass my new variable in the this.src attribute.

Anybody have any ideas?

Much appreciated!

Answer 1

With jQuery by using mouseover() and mouseout() and attr() methods.

$(document).ready(function(){
  var file_name='your_file_name';
  var new_source_for_image ="/prestashop_1.7.0.3/modules/se_daynight/img/" + file_name + ".png";
  var new_source_for_image_with_glow = "/prestashop_1.7.0.3/modules/se_daynight/img/" + file_name + "_glow" + ".png";

  $("img#visit_image").attr('src',new_source_for_image);
  $("img#visit_image").mouseover(function(){
    $(this).attr('src',new_source_for_image_with_glow);
  });

  $("img#visit_image").mouseout(function(){
    $(this).attr('src',new_source_for_image);
  });
});