将变量传递给 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));

这是一个 fiddle 它的工作原理：https://jsfiddle.net/dkbewvay/

希望对您有所帮助。

Answer 2

使用这些事件处理程序的更好方法，onmouseover 和 onmouseout 是为它们提供在脚本中定义的各自函数。您还需要将图像正确分配给 img 元素 (ev.srcElement) 看看：

<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 href="#"><img id="visit_image" src="" width="350" height="350" 
             onmouseover="MouseOverHandler(this)"
             onmouseout="MouseOutHandler(this)"></a>

Answer 3

通过使用 mouseover() 和 mouseout() 以及 attr() 方法与 jQuery 一起使用。

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

Answer 4

这会起作用：

 <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 href="#">
    <img id="visit_image" src="new_source_for_image_with_glow" width="350" height="350"
         onmouseover="onmouseoverFunc(this)"
         onmouseout="onmouseoutFunc(this)">
</a>

Answer 5

如果您可以动态设置 src...我想您也可以为 "alternate source" 设置数据属性 ?!?

// Simulating your dynamic file source for the image.
$("#visit_image").attr("src", "http://lorempixel.com/400/200/sports");

// The same way, you could set an "alternate source"...
$("#visit_image").data("altSrc", "http://lorempixel.com/400/200/animals");


// The mouse events handler
$("#visit_image").on("mouseenter mouseleave", function(){
  var src = $(this).attr("src");
  var altSrc = $(this).data("altSrc");
  
  // Interchange the urls
  $(this).attr("src", altSrc).data("altSrc", src);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

此演示将 "sports" 和 "animals" 之间的 URL 互换。

将变量传递给 this.src

Pass variable to this.src

html

javascript

jquery

image

onmouseover