Simon Edge Simon Edge - 1 month ago 15
Javascript Question

javascript pass variable to this.src

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 Source
With jquery by using mouseover() and mouseout() and attr() functions

$(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);
});
});