Animating a gif on hover

javascript jquery animation gif

71,893

Solution 1

Here is a working example for what you need - http://jsfiddle.net/EXNZr/1/

<img id="imgDino" src="http://bestuff.com/images/images_of_stuff/64x64crop/t-rex-51807.jpg?1176587870" />

<script>
    $(function() {
        $("#imgDino").hover(
            function() {
                $(this).attr("src", "animated.gif");
            },
            function() {
                $(this).attr("src", "static.gif");
            }                         
        );                  
    });
</script>

Solution 2

I haven't read the link, however the easiest way to do this is to change the img tags src attribute with javascript on hover like this (jQuery)

$(function() {
    $('a').hover(function() {
      $(this).attr('src','path_to_animated.gif');
    },function() {
      $(this).attr('src','path_to_still.gif');
    }
});

No plugins required... you might want to preload the animated gif by adding $('<img />',{ src: 'path_to_animated.gif'}); before the hover bind.

Hope that helps

Solution 3

Try this if you are OK to use canvas:

   <!DOCTYPE html>
    <html>
    <head>
        <style>
            .wrapper {position:absolute; z-index:2;width:400px;height:328px;background-color: transparent;}
            .canvas {position:absolute;z-index:1;}
            .gif {position:absolute;z-index:0;}
            .hide {display:none;}
        </style>

        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

        <script>
            window.onload = function() {
                var c = document.getElementById("canvas");
                var ctx = c.getContext("2d");
                var img = document.getElementById("gif");
                ctx.drawImage(img, 0, 0);
            }

            $(document).ready(function() {
                $("#wrapper").bind("mouseenter mouseleave", function(e) {
                    $("#canvas").toggleClass("hide");
                });
            });
        </script>

    </head>
    <body>

    <div>
        <img id="gif" class="gif" src="https://www.macobserver.com/imgs/tips/20131206_Pooh_GIF.gif">

        <canvas id="canvas" class="canvas" width="400px" height="328px">
        </canvas>

        <div id="wrapper" class="wrapper"></div>
    </div>

    </body>
    </html>

71,893

Author by

Mark Kramer

I'm a 23 year old professional currently searching for a job in the field of IT or Web Development. I recently applied a lot of what I learned here to making this: DataTypeCalculator

Updated on April 27, 2020

Comments

Mark Kramer about 4 years

I've looked for the answer for this and I found it, but I don't know how to use it.

Stop a gif animation onload, on mouseover start the activation

Guffa's answer to that question is exactly what I want, but I don't know how to use that code.

I have the jquery plugin, but where do I put the code (not the plugin; the code that was in Guffa's answer)? How do I use it in reference to the images? Is there a function I have to call to get it to work? If so, what would be the best way to call it?

Sorry for asking a question that has already been answered, but his answer wasn't specific enough and I couldn't comment to ask him for a more specific answer.
Mark Kramer almost 13 years

It does, but that's a very similar answer to guffa's the problem is that I don't know what to do with that code. Is it a function I need to call? Where do I put it? Show me how it would work inside an HTML document
ianbarker almost 13 years

@Mark Kramer so which bits don't you understand?
Mark Kramer almost 13 years

Okay, thank you very much. However, If I were you, I'd just put the jquery inside script tags. But thanks, I'll accept this as the answer. Oh, and the site you linked to is very useful, I can't believe I haven't seen that yet.
Tim about 12 years

Make sure you preload the animated gif, otherwise they could be a delay on rollover. Or better still, make one gif with the static gif above the animated gif, set the gif as the background image of an element, and simply change the background positioning on rollover (aka CSS sprite rollovers).
Michal - wereda-net about 4 years

Or preload with pure js: document.createElement('img').src = '//example.com/example.png'; From:stackoverflow.com/questions/8971312/…