KAbbott
asked on
How to play GIF's on mouseover ONLY
I've created a GIF file (animated) and I want this animation to play only when I mouseover the image.
At the moment all that happens is the animation takes place as soon as the page is loaded, as this is a rollover button (thats animated) it doesn't look very good.
Does anyone know how to do this? Thanks.
p.s I'm using Ultradev 4 with Photoshop 6 to create this website.
At the moment all that happens is the animation takes place as soon as the page is loaded, as this is a rollover button (thats animated) it doesn't look very good.
Does anyone know how to do this? Thanks.
p.s I'm using Ultradev 4 with Photoshop 6 to create this website.
Have the mouseover be the animated gif and the mouseoff be the static one.
TRY:
<IMG SRC="animated.gif" ONMOUSEOVER="this.src=this .src + '?' + Math.random()">
<IMG SRC="animated.gif" ONMOUSEOVER="this.src=this
ASKER
Thanks for your answers so far.
bebonham I've tried your piece of code and heres what the conclusion is:
It works in IE but not Netscape.
Also it plays the GIF before I mouseover and stays on the final frame.
What I want it todo is:
I only want the GIF to play once the mouse cursor has been put over the image. At the moment the GIF is constantly on frame 10, when I mouse over it plays from frame 1 to 10 and stays on 10.
What I want it to do is stay on frame 1 and when I mouseover it plays to frame 10, when I mouse out to return to frame 1.
Is this possible? Thanks is advance.
bebonham I've tried your piece of code and heres what the conclusion is:
It works in IE but not Netscape.
Also it plays the GIF before I mouseover and stays on the final frame.
What I want it todo is:
I only want the GIF to play once the mouse cursor has been put over the image. At the moment the GIF is constantly on frame 10, when I mouse over it plays from frame 1 to 10 and stays on 10.
What I want it to do is stay on frame 1 and when I mouseover it plays to frame 10, when I mouse out to return to frame 1.
Is this possible? Thanks is advance.
I think raizon pointed you in the right direction.
Save frame1 as a separate gif. Then set the mouseover to be the complete animation.
<IMG SRC="frame1.gif" ONMOUSEOVER="fullgif.gif">
Save frame1 as a separate gif. Then set the mouseover to be the complete animation.
<IMG SRC="frame1.gif" ONMOUSEOVER="fullgif.gif">
First of all you need to preload the animated gif by putting this in the head:
<script language="JavaScript">
<!--
image1 = new Image();
image1.src = "animated.gif";
//-->
A mouseover on an image won't work in Netscrap you do it this way
<a href="Javascript:;" onMouseover="document.imag es['theima ge'].src=' animated.g if'"
on Mouseout="document.images[ 'theimage' ].src='sta tic.gif'">
<img src="static.gif" border=0></a>
You create static gif as frame one of the animated gif
HTH
Cd&
<script language="JavaScript">
<!--
image1 = new Image();
image1.src = "animated.gif";
//-->
A mouseover on an image won't work in Netscrap you do it this way
<a href="Javascript:;" onMouseover="document.imag
on Mouseout="document.images[
<img src="static.gif" border=0></a>
You create static gif as frame one of the animated gif
HTH
Cd&
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Can't even remember why I needed to know this now, but here goes
Hello KAbbott,
After review of this question, I see that it is not deserving of an C grade (Based on the link below). If you feel this is error, please respond.
E-E question grading link for your information.
https://www.experts-exchange.com/jsp/cmtyQuestAnswer.jsp#3
Thank you
Computer101
Community Support Moderator
After review of this question, I see that it is not deserving of an C grade (Based on the link below). If you feel this is error, please respond.
E-E question grading link for your information.
https://www.experts-exchange.com/jsp/cmtyQuestAnswer.jsp#3
Thank you
Computer101
Community Support Moderator