Highlighted

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

New Here ,
Jan 17, 2019

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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>

Views

141

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

New Here ,
Jan 17, 2019

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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>

Views

142

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 17, 2019 0
Adobe Community Professional ,
Jan 18, 2019

Copy link to clipboard

Copied

Hi,

Can you post the code please


Paul-M, ACP - www.webspectrum.co.uk

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 18, 2019 1
Adobe Community Professional ,
Jan 18, 2019

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 18, 2019 1