具有多个图像和 getElementById 的 JavaScript SwapImage

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 的灵 active ，而不是大惊小怪地使用 JQuery 或其他脚本。这就是我使用 getElementById 的原因。

Is there a more efficient way for me to write that JavaScript, and/or Inline code?

还有

Is there a way for the image to swap back to the original after the animation stops playing, rather than on mouse-out?

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')" />