Solved

Stop gif animating until mouseover

Posted on 1998-09-29
8
539 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
  • 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
 
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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

747 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

16 Experts available now in Live!

Get 1:1 Help Now