Solved

Stop gif animating until mouseover

Posted on 1998-09-29
8
542 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
ScreenConnect 6.0 Free Trial

Check out the updates in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI that improves session organization and overall user experience. See the enhancements for yourself!

 
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
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 …
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

809 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