Question

我有两张名为sun.jpg和moon.jpg的图片我需要帮助来完成这项任务。

•当鼠标悬停在任一图像上时，使用功能交换图像的位置。（在onmouseover事件处理程序中为两个图像调用相同的函数。该函数将图像加载到适当的位置。）

•当鼠标移出图像时，将图像切换回原始位置（您可以使用相同的功能并使用参数传递不同的值。此功能将加载两个原始图像。）

<script>
     function MouseRollover(MyImage) { 
          MyImage.src = "Rollover_Images/moon.jpg"; 
     } 
     function MouseOut(MyImage) { MyImage.src = "Rollover_Images/sun.jpg"; }
</script> 
<img src="Rollover_Images/sun.jpg" onMouseOver="MouseRollover(this)" onMouseOut="MouseOut(this)">
<img src="Rollover_Images/moon.jpg" onMouseOver="MouseOut(this)" onMouseOut="MouseRollover(this)">

Answer 1

这就是你要找的东西：

<img id="img1" src="http://placehold.it/300x300" onMouseOver="doFlip(true)" onMouseOut="doFlip(false)">
<img id="img2" src="http://placehold.it/200x200" onMouseOver="doFlip(true)" onMouseOut="doFlip(false)">
<script>
    var img1 = document.getElementById("img1");
    var img2 = document.getElementById("img2");
    var img1path = "http://placehold.it/300x300";
    var img2path = "http://placehold.it/200x200";
    function doFlip(isOn) {
        if (isOn) {
            img1.src = img2path;
            img2.src = img1path;
        } else {
            img1.src = img1path;
            img2.src = img2path;
        }
    }
</script>

请参阅小提琴：http://jsfiddle.net/BenjaminRay/xpmgnas1/

使用javascript函数切换图像位置

1 个答案: