javascript - 将变量传递给 this.src

Question

我有一个在 javascript 中生成的图像文件的名称，并传递到 HTML 中图像的 src - 目前有效。

我想传递另一个图像文件作为图像的 onmouseover 属性。(因为我的文件名是动态生成的，所以我无法在 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>

所以我想到从生成的文件名中添加另一个变量:

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

和:

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

但我不知道如何在 this.src 属性中传递我的新变量。

有人有什么想法吗？

非常感谢!

Answer 1

我相信这就是您正在寻找的。不需要 jQuery，只需要普通的旧 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));

这是它的工作原理:https://jsfiddle.net/dkbewvay/

希望这有帮助。