Skip to main content
palos verdesm59487140
palos verdesm59487140
Participant
January 18, 2019
Answered

Animated gif plays once but can't be seen from begining again, why?

  • January 18, 2019
  • 2 replies
  • 852 views

Hey folks. It is silly but I do not know why my animated gif inserted into page plays once (it was created to play once) but when call again through swap images or show / hide layers do not play from beginning. It shows just end. I need to refresh page. Manually through browser or "Refresh" head tag with automatic action delayed in seconds. Is there any way to make it through click / mouse over behavior?

Please help.

Janusz

    This topic has been closed for replies.
    Correct answer Jon Fritz

    The reason it's not working for you is because your animated gif is very likely only being loaded to your page one time. Since it's only designed to play once after loading, you see the last frame on subsequent rollovers. I've gotten around this in the past by appending the animated .gif src with a ? and random number using javascript. This tricks the browser into reloading the image every time it's hovered (because the file name is different every time).

    The below is for a <div> background...

    CSS:

    #offState {

         background-image:url(off-state.jpg);

    }

    HTML:

    <div id="offState" onmouseover="this.style.backgroundImage = 'url(animated.gif?' + Math.random() + ')';" onmouseout="this.style.backgroundImage = 'url(off-state.jpg)';">

    </div>

    2 replies

    Jon Fritz
    Community Expert
    Jon FritzCommunity ExpertCorrect answer
    Community Expert
    January 18, 2019

    The reason it's not working for you is because your animated gif is very likely only being loaded to your page one time. Since it's only designed to play once after loading, you see the last frame on subsequent rollovers. I've gotten around this in the past by appending the animated .gif src with a ? and random number using javascript. This tricks the browser into reloading the image every time it's hovered (because the file name is different every time).

    The below is for a <div> background...

    CSS:

    #offState {

         background-image:url(off-state.jpg);

    }

    HTML:

    <div id="offState" onmouseover="this.style.backgroundImage = 'url(animated.gif?' + Math.random() + ')';" onmouseout="this.style.backgroundImage = 'url(off-state.jpg)';">

    </div>

    P
    Paul-M
    Legend
    January 18, 2019

    Hi,

    Can you post the code please

    Paul-M - Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices