Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 560
  • Last Modified:

Stop gif animating until mouseover

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
Spo0n
Asked:
Spo0n
  • 4
  • 3
1 Solution
 
jbirkCommented:
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
 
jbirkCommented:
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
 
Spo0nAuthor Commented:
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!

 
MasseyMCommented:
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
 
Spo0nAuthor Commented:
What's the difference between that and what Josh suggested?
0
 
Spo0nAuthor Commented:
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
 
Spo0nAuthor Commented:
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
 
jbirkCommented:
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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now