FANDOM


  • Hello! Hope I'm posting this in the right place.

    Anyways, I'm a bureaucrat on the Feral Wiki, and we have a page called "Dizzywing Dispatch" which is about a minigame that's present in the game. Scrolling down to the Bird Combinations section, we have a series of GIFs that show what happens when you trigger one of these combinations. However, the GIFs moving all at once is very distracting and busy, and I fear that it might even cause issues for some people who are viewing the page.

    So, is there a way that I can make it so the GIFs are paused until hovered over by the user's mouse? I feel like the animated images are useful for people who learn better through visual representation rather than reading text but I don't want it to be too distracting where it's hard to see what's going on.

    Thanks in advance for any responses!

    -Jay (The Tiger's Roar)

      Loading editor
    • Unfortunately, I am fairly certain there is no easy solution to this. I couldn't think of any and all the online threads I found about this had similar conclusions. It isn't impossible but the solution definitely isn't a built-in feature; and probably won't work well (if at all) on mobile.

        Loading editor
    • The way to do this would probably have a jpeg (or non-animated gif) that looks just like the gif and use JS to swap in the animated gif on hover.

        Loading editor
    • As Fandyllic pointed out, something like this:

      $("#gif1").hover(
          function() {
              $(this).attr("src", "animate1.gif");
          },
          function() {
              $(this).attr("src", "static1.jpg");
          }                         
      );
        Loading editor
    • Though you would probably want to use a class instead of an id since it sounds like there are a lot of them.

        Loading editor
    • I don't think a class would work, unless you had different code, since the code above is for specific images.

        Loading editor
    • Thanks everyone! Will be trying these out some time within the next week.

        Loading editor
    • Yes, the code would need to be a bit different but that above code requires those lines be duplicated for each image.

        Loading editor
    • Just saying one should use a class without a code example isn't very helpful. Also, most likely you can't just use a class, you'd have to build a hash table or something for lookups... much more complicated unless you make file names match or something.

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message
Community content is available under CC-BY-SA unless otherwise noted.