1

我想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 和/或内联代码？

还

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

4

3 回答 3

2

使用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')" />
于 2012-10-20T03:57:18.410 回答
1

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

只需为您希望对其产生影响的每个图像添加一个新属性，然后在页面加载时运行一些 js 以附加处理程序。

在这里，我刚刚使用（并检查了是否存在）自定义属性。如果图像有它们，我会附加处理程序。如果不是，它与任何其他正常图像没有什么不同。这应该是一个很好的可重复使用且使用起来很少的努力。

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

<!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>
于 2012-10-20T06:51:49.293 回答
0

Jay 对你的函数有一个很好的建议，它们都做同样的事情。如果您从函数中删除名称，您会发现它们在其他方面是相同的。函数名根本没有区别，在这种情况下，重要的是传递给函数的参数。

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

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

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

于 2012-10-20T04:10:25.953 回答