Solved

How to play GIF's on mouseover ONLY

Posted on 2001-07-30
8
760 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

739 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