/    Sign up×
Community /Pin to ProfileBookmark

Controlling .gif animation using Javascript (Opera issue)

I have a gallery of images that I wish to animate on every mouseover, so I’ve implemented the following code into my site:

[CODE]<script language=”JavaScript”>
<!–
function flip( name, url )
{name.src = url;}
//–>
</script>[/CODE]

And then, for the img tag:

[CODE]
<img src=”../images/bh/chrish_00.gif” name=”home” onmouseover=”flip(home, ‘../images/bh/chrish_ani.gif’)” border=”0″>
[/CODE]

Now, in FF and IE, this works as intended: The image is stationary until a mouseover, which is when the animation plays to completion, and any mouseover after the animation is complete will restart it.

In Opera, however, the image stays on the last frame of the animated gif, and doesn’t reset. I do not wish to stop the animation on a mouseout, so I’m not sure what event I can use to tell Opera to go back to the first image.

Any help?

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@Logic_AliMar 21.2008 — 
&lt;script language="JavaScript"&gt;
&lt;!--
function flip( name, url )
{name.src = url;}
//--&gt;
&lt;/script&gt;

And then, for the img tag:

<i>
</i>&lt;img src="../images/bh/chrish_00.gif" name="home" onmouseover="flip(home, '../images/bh/chrish_ani.gif')" border="0"&gt;
[/quote]
You have shown no code that can initialise or generate an animation.
Copy linkTweet thisAlerts:
@felgallMar 21.2008 — There is no code for an animated gif. The animation is built into the gif.

How a browser handles an animated gif is up to the browser. If you want full control of the animation so that it runs the same in all browsers then you need to use a JavaScript animation with multiple images instead of relying on the animation embedded into the gif.
×

Success!

Help @chrishanel spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...