Question

我想在我的网站上实现一个swapImage，它会在mouseover上交换一个图像，在mouseout上交换另一个图像。基本上，通过我发现的解决方案，我甚至可以为mousedown和mouseup交换不同的图像。

我在8个不同的嵌套标签中发生这种情况，所有标签都在同一页面上。

javascript看起来像这样：

<script type="text/javascript">
    function swapImageFiat(imgID, imgSrc) {
        var theImage = document.getElementById(imgID)
        theImage.src = imgSrc;
    }

    function swapImageHarley(imgID, imgSrc) {
        var theImage = document.getElementById(imgID)
        theImage.src = imgSrc;
    }

    function swapImageHotWheels(imgID, imgSrc) {
        var theImage = document.getElementById(imgID)
        theImage.src = imgSrc;
    }

    function swapImageVoltron(imgID, imgSrc) {
        var theImage = document.getElementById(imgID)
        theImage.src = imgSrc;
    }

    function swapImageBenchmade(imgID, imgSrc) {
        var theImage = document.getElementById(imgID)
        theImage.src = imgSrc;
    }

    function swapImageCrew(imgID, imgSrc) {
        var theImage = document.getElementById(imgID)
        theImage.src = imgSrc;
    }

    function swapImageReuters(imgID, imgSrc) {
        var theImage = document.getElementById(imgID)
        theImage.src = imgSrc;
    }

    function swapImageMarsVolta(imgID, imgSrc) {
        var theImage = document.getElementById(imgID)
        theImage.src = imgSrc;
    }

    function preLoadImages() {
        for(var i = 0; i < arguments.length; i++) {
            var theImage = new Image();
            theImage.src = arguments[i];
        }
    }
</script>

每个图片的内联代码基本上就是这样：

<img class="diagram" src="img/fiat.gif" id="imgToSwapFiat" alt="Diagram" data-title="Fiat Diagram" onClick="swapImageFiat('imgToSwapFiat', 'img/fiat-animated.gif')" onmouseout="swapImageFiat('imgToSwapFiat', 'fiat.gif')" height="189" width="358" />

我希望能够使用更少的ID ，减少相同的重复脚本和更短的内联代码。
但我也希望能够灵活地只是更改图像及其ID，而不是使用JQuery或其他脚本。这就是我使用getElementById的原因。

我是否有更多高效方式来编写JavaScript和/或内联代码？

另外

在动画停止播放之后，图片有没有办法换回原来的，而不是鼠标移出？

Answer 1

使用this代替元素ID，因为您的函数最终需要实际的元素对象。

脚本示例：

function swapImageFiat(imgEle, imgSrc) {
    imgEle.src = imgSrc;
}

图片HTML示例：

<img src="initial.jpg" onclick="swapImageFiat(this, 'clicked.jpg')" onmouseover="swapImageFiat(this, 'hovered.jpg')" onmouseout="swapImageFiat(this, 'left.jpg')" />

Answer 2

是的，确定有。正如Jan提到的那样 - 你的所有功能都是相同的。没有必要全部复制它们。此外，您可以从html中删除内联事件处理程序代码，只需附加mouseover / mouseout或mousedown / mouseup。

只需为您想要效果的每个图像添加一个新属性，然后在页面加载上运行一些js以附加处理程序。

在这里，我刚刚使用（并检查了存在）自定义属性。如果图像有它们，我附上处理程序。如果没有，它与任何其他正常图像没有区别。这应该是一个很好的可重用和很少使用的工作。

对于动画gif播放后重置图像，我可能会看看Jan的第一个建议。对该想法进行略微修改将使最后一帧变得透明，然后简单地将动画图像定位在静态图像上（z-index higher）。完成后，您将再次看到原始图像。如果需要重新播放，您必须决定刷新这些图像的系统。我不确定，或许将他们的src设置为''，然后再将它设置回animated.gif会导致动画从头开始播放 - 你必须检查是否决定尝试这样的方法。 / p>

<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}

function mInit()
{
    var imgList = document.getElementsByTagName('img');
    var i, n = imgList.length;
    for (i=0; i<n; i++)
    {
        if (imgList[i].hasAttribute('img2'))
            imgList[i].addEventListener('click', imgClick, false);
        if (imgList[i].hasAttribute('img3'))
            imgList[i].addEventListener('mouseover', imgHover, false);
        if (imgList[i].hasAttribute('img4'))
            imgList[i].addEventListener('mouseout', imgOut, false);
    }
}

// because these function are attached with addEventListener, the 'this'
// keyword refers to the image element itself. No need for IDs..
function imgClick()
{
    this.src = this.getAttribute('img2');
}
function imgHover()
{
    this.src = this.getAttribute('img3');
}
function imgOut()
{
    this.src = this.getAttribute('img4');
}


window.addEventListener('load', mInit, false);

</script>
<style>
</style>
</head>
<body>
    <img src='img/gladiators.png'>  <!-- this image won't be touched, as it doesn't have img1, img2 or img3 attributes -->
    <img src='img/opera.svg' img2='img/chromeEyes.svg' img3='img/rss16.png' img4='img/girl2.png'/>
</body>
</html>

Answer 3

杰伊对你的功能提出了很好的建议，这些功能都做同样的事情。如果从功能中删除名称，您将看到它们在其他方面完全相同。函数名完全没有区别，在这种情况下，它只是传递给重要函数的参数。

有没有办法让图像在之后换回原版动画停止播放，而不是鼠标移出？

您可以使GIF非循环，并使动画的最后一帧与原始图像相同。 AFAIK无法通过Javascript检测动画gif所在的帧。

如果你真的希望它返回原始图像，你可以通过Javascript完全动画图像：编写一个预加载所有图像（或一个精灵图）的函数，然后逐帧加载它们。

带有多个图像和getElementById的JavaScript SwapImage

3 个答案: