Animating a gif on hover

Question

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.

score 24 · Accepted Answer · edited May 22 '12 at 15:48

24

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>

edited May 22 '12 at 15:48

Jakob Løkke Madsen

275
6
18

answered Sep 19 '11 at 15:26

Amit

1,136
2
13
22

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. – Mark Kramer Sep 19 '11 at 15:34
3

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). – Tim May 22 '12 at 15:54

score 6 · Answer 2 · answered Sep 19 '11 at 15:23

6

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

answered Sep 19 '11 at 15:23

ianbarker

1,251
10
22

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 – Mark Kramer Sep 19 '11 at 15:27
@Mark Kramer so which bits don't you understand? – ianbarker Sep 19 '11 at 15:28
Or preload with pure js: document.createElement('img').src = '//example.com/example.png'; From:https://stackoverflow.com/questions/8971312/what-browsers-download-hidden-images – Michal - wereda-net Apr 10 '20 at 09:19

score 2 · Answer 3 · answered Apr 27 '17 at 05:07

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>

Animating a gif on hover

3 Answers3

Linked