Solved

How to play GIF's on mouseover ONLY

Posted on 2001-07-30
8
755 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
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
 
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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
This video teaches users how to migrate an existing Wordpress website to a new domain.

810 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