Solved

How to play GIF's on mouseover ONLY

Posted on 2001-07-30
8
752 Views
Last Modified: 2012-05-04
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.
0
Comment
Question by:KAbbott
8 Comments
 
LVL 5

Expert Comment

by:raizon
ID: 6334533
Have the mouseover be the animated gif and the mouseoff be the static one.
0
 
LVL 8

Expert Comment

by:bebonham
ID: 6334569
TRY:

<IMG SRC="animated.gif" ONMOUSEOVER="this.src=this.src + '?' + Math.random()">
0
 
LVL 2

Author Comment

by:KAbbott
ID: 6334737
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.
0
 
LVL 7

Expert Comment

by:ClassyLinks
ID: 6334824
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">
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6335753
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.images['theimage'].src='animated.gif'"
                       on Mouseout="document.images['theimage'].src='static.gif'">
<img src="static.gif" border=0></a>


You create static gif as frame one of the animated gif

HTH

Cd&
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 50 total points
ID: 6425567
So KAbbot, what's the deal.  did you get the answer and leave without saying thank you, by accepting an answer?

Did you forget this?

Did you give up on it?

Did you fall ill, and are thus not able to respond?

???????????????????????????????????????

Cd&
0
 
LVL 2

Author Comment

by:KAbbott
ID: 6450521
Can't even remember why I needed to know this now, but here goes
0
 
LVL 1

Expert Comment

by:Computer101
ID: 6450772
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.
http://www.experts-exchange.com/jsp/cmtyQuestAnswer.jsp#3

Thank you
Computer101
Community Support Moderator
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Problem to be resolved in this article Currently, development of website and web application can be done without writing thousands of lines of programming code by hand. Description This can be done through by using a open source framework such …
Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now