带有多个图像和getElementById的JavaScript SwapImage

Question

I wanted to implement a swapImage on my site that would swap one image on mouseover , and another image on mouseout . Essentially, with the solution I found I could also probably swap different images for mousedown and mouseup even.

I have this happening in 8 different nested tabs, all of which are on the same page.

The javascript looks like this:

<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>

And the inline code for each image would be essentially this:

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

I would like to be able to use less IDs , less of the same repetitive script, and shorter inline code.
But I also want the flexibility of being able to just change the images and their IDs, rather than fussing with JQuery or other script. This is why I'm using getElementById .

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

Also

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

Use this instead of the element ID since your function eventually need the actual element object.

The script example:

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

The image HTML example:

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

Answer 2

Yeah, sure there is. As Jan mentions - all of your functions are identical. There's no need to duplicate them all. Also, you can remove the inline event-handler code from your html, simply attaching the mouseover/mouseout or mousedown/mouseup.

Simply add a new attribute to each image that you wish to have the effect for, then runs some js on page-load to attach the handler.

Here, I've just used (and checked for the existance of) custom attributes. If the image has them, I attach handlers. If not, it's no different to any other normal image. This should be nice an re-usable and little effort to use.

As for resetting the image once the animated gif has played, I'd probably look at Jan's first suggestion. A slight modification on the idea would be to make the last frame transparent, then simply position the animated image over (z-index higher) the static one. When it's done, you'll see the original image again. You'll have to decide on a system for refreshing these images, should they need to be re-played. I'm not sure, perhaps setting their src to '', before setting it back to the animated.gif would cause the animation to play from the start again - you'd have to check if to decided to attempt such an approach.

<!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

Jay has a good suggestion for your functions, which all do the same thing. If you remove the names from your functions you'll see they are otherwise identical. And the function name makes no difference at all, in this case it's just the arguments you pass to the function that matters.

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

You could make the gifs non-looping and make the last frame of the animation the same as the original image. AFAIK there's no way to detect which frame an animated gif is on through Javascript.

If you really want it to return to the original image, you could animate the image completely through Javascript: Write a function that preloads all the images (or a spritemap) and then load them frame by frame.