Solved

Stop gif animating until mouseover

Posted on 1998-09-29
8
549 Views
Last Modified: 2013-11-19
I have some buttons with onMouseover code attached and I would like the second image (when the mouse is over the button) to be an animated gif that only loops once.  The code I am currently using is preloading the images and consequently the gif has usually played the once by the time the button is used.  Is there a way I can still preload the mouseover images that aren't animated and at the same time stop the animated ones from preloading?
0
Comment
Question by:Spo0n
[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
  • 4
  • 3
8 Comments
 
LVL 8

Expert Comment

by:jbirk
ID: 1271606
Well this can be an annoying problem, but the answer is not to stop the animated gifs from preloading.  I've seen two methods that both work, but in different situations.
One, which is kind of cool, is to preload the image and specify dimensions for it that are completely wrong.  Then when you try to swap it into the slot, it has to stretch it (actually stretching it back to it's original size) to fit into the image you tell it to load into, and this process causes the animation to start over.  This works on Netscape but may have problems on IE.

The other way, which I think works better in more situations is to add a # to the end of the file which you are loading.  So that would like this:
    document.images[img_name].src = "../images/" + img_name + ".gif#";
Or however you have your images set to change onMouseOver, just add the # to the end of the gif name (oh and don't refer to the variable which was created from preloading the image, instead refer to the file)

Best of luck,
Josh
0
 
LVL 8

Expert Comment

by:jbirk
ID: 1271607
Oh, I just remembered why the first mehtod will work in IE.  All you have to do is make sure that the wrong dimensions are only off by 1 pixel, then the image looks the same even though it's being displayed at a pixel size difference (IE will dynamically change the size it takes on the screen).

-Josh
0
 

Author Comment

by:Spo0n
ID: 1271608
Sorry Josh, it's not that I'm unhappy with the answer it's that I don't understand it.  :)
I think i get what you mean with the resizing of the image but I think I'd rather go with your second option with the code.  The test page is located at: http://www.qonline.com.au/~spoon/jbirk/ 
So could you have a look at the display function and advise me on how to change it to suit your answer please? Thanks mate.  The points are yours anyway after this little bit more help.


0
Independent Software Vendors: 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 10

Expert Comment

by:MasseyM
ID: 1271609
What about using a "mouseover" type event.

Initially, load a non-animated graphic. then when the mouse is over the picture, load the animated version... If you want, when the mouse goes out, load the non-animated one again...

0
 

Author Comment

by:Spo0n
ID: 1271610
What's the difference between that and what Josh suggested?
0
 

Author Comment

by:Spo0n
ID: 1271611
MasseyM your answer just reminded me of something too...
If the animation is made to only play once and it is either preloaded or loaded with the onMouseover event, will it play again?  It seems that once the animation has played if you try to view the image again without reloading it, it sits on either the first or the last frame of the animation.
0
 

Author Comment

by:Spo0n
ID: 1271612
doh
I also changed the code on the page to make it a little easier to grab the 'off'  image so you can play with it.
0
 
LVL 8

Accepted Solution

by:
jbirk earned 50 total points
ID: 1271613
OK, here's you fixed file:

<html>
<head>
<title>Dem Goodum JavaScript</title>

<script language="JavaScript">


animOn = new Image();
animOn.src = "animCap.gif";
animOff = new Image();
animOff.src = "cap.gif";

function display(toggle, image)
{if (document.images)
  {if ( (image + toggle) == "animOn")
    document[image].src = "animCap.gif#";
   else
    {imgName = eval(image + toggle + ".src");
     document[image].src = imgName;
    }
  }
} // display

</script>
</head>

<body>

<a href="#" onmouseover="display('On', 'anim'); return true" onmouseout="display('Off', 'anim'); return true"><IMG SRC="cap.gif" NAME="anim" BORDER="0"></a>
<br><Br><Br>
<img src=cap.gif>

</body>
</html>


-Josh
0

Featured Post

Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Glitching Slide Show 19 39
Boolean 13 49
XML loaded in a form with dropdown 6 53
display data from multiple ajax calls 9 41
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

734 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