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 target="_blank" rel="nofollow" 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 target="_blank" rel="nofollow" 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!



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

I believe this is what you’re looking for. No jQuery required just plain old JavaScript.

const image = document.querySelector('img');

const baseImagePath = 'https://unsplash.it/';

const mouseEnterImage = '300';

const mouseLeaveImage = '400';

const replaceImage = (withImg) => {
    image.src = `${baseImagePath}${withImg}`;
}

document.addEventListener('mouseenter', () => replaceImage(mouseEnterImage));

document.addEventListener('mouseleave', () => replaceImage(mouseLeaveImage));

Here is a fiddle of it working: https://jsfiddle.net/dkbewvay/

Hope this helps.

the better way to use these event handlers, onmouseover & onmouseout is to supply them with their respective functions defined inside the your script. And you also need to properly assign the image to img element (ev.srcElement) Have a look:

<script>
MouseOverHandler = function(ev){ 
    ev.srcElement.src = new_source_for_image
    console.log('should change',ev);
}

MouseOutHandler = function(ev){ 
    ev.srcElement.src = old_source_for_image
    console.log('should change',ev);
}
</script>

<a target="_blank" rel="nofollow" href="#"><img id="visit_image" src="" width="350" height="350" 
             onmouseover="MouseOverHandler(this)"
             onmouseout="MouseOutHandler(this)"></a>

this will work:

 <script>
        var new_source_for_image_with_glow = "testA.png";

        var anotherSrc = "testB.png";


        function onmouseoverFunc(element) {
            element.src = new_source_for_image_with_glow;
        }

        function onmouseoutFunc(element) {
            element.src = anotherSrc;
        }
    </script>


<a target="_blank" rel="nofollow" href="#">
    <img id="visit_image" src="new_source_for_image_with_glow" width="350" height="350"
         onmouseover="onmouseoverFunc(this)"
         onmouseout="onmouseoutFunc(this)">
</a>

If you can dynamically set a src… I suppose you also can set a data attribute for an “alternate source” ?!?

This demo interchanges the URL between “sports” and “animals”.