Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Stop/start .gif animations

    I'm sure there's a way of working around this or coming up with some sort of solution....

    I've got several .gif animations on webpages and I want to make start/stop buttons for them so they don't just start playing when the page loads.

    Any clever ideas as to how to work this one out?

    Thanks

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Basically you'd have a still image (perhaps the first frame of the gif you want to show), and use that as the starting image. Then apply some Javascript to the start and stop buttons to change the image source to the moving gif when they are clicked.

    The image you want to change -
    <img src="still.gif" id="gif1" alt="image" />

    The start image -
    <a href="#" onclick="document.getElementById('gif1').src='moving.gif'"><img src="start.gif" alt="play animation" /></a>

    The stop image -
    <a href="#" onclick="document.getElementById('gif1').src='still.gif'"><img src="stop.gif" alt="stop animation" /></a>

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Doing it that way will always revert back to the same image when you stop. If you want to be able to stop at any image then you will need to use a Javascript animation and separate static gifs rather than an animated gif.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok thanks that's great but can you just explain a couple of bits a little more.

    The second two bits are within the JavaScript? Do I just start JavaScript, copy them in and then end the JavaScript? Or do I need the first bit in the javascript too?

    And you've used the examples "still", "moving", "start", "stop"
    Moving's obviously going to be the animation, and what are the other three? I'd guess still and stop are going to be that still image you were talking about (intro.gif for sake of argument) but what's start?

    Thanks!

  • #5
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Right... still.gif is the first frame of the animation, moving.gif is the animated gif, start.gif is a start button - when clicked it will start the animated gif, stop.gif is a stop button - when clicked it will stop the animated gif.

    I've created an example here -

    http://www.markaylward.co.uk/testset..._stop_gif.html

    The only Javascript is within the onclick events; you can change the start and stop images for buttons/links if you really want.
    Last edited by mark87; 01-14-2006 at 12:46 AM.

  • #6
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you!!! you legend thanks it's all working now

  • #7
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Start/stop gif animations

    Hi, folks,

    newbie trying to flog a dead thread here.

    Basically, I'm trying to play a gif animation when I mouse over this button. When I mouse out of the button, the animation will stop playing.

    I am facing the same problem as Bombproofgp. However mine's a little different: I do not need a stop button. I just need the gif animation to stop playing when I mouse out.

    I tried experimenting with mark87's code but I keep ending up with two buttons.

    <a href="# "onmouseover="document.getElementById('gif1').src='moving.gif'"><img src="3fingers.jpg" width="364" height="363"alt="play animation" /></a>

    <a href="# "onmouseout="document.getElementById('gif1').src='still.gif'"><img src="3fingers.jpg" width="364" height="363"alt="stop animation" /></a>
    Any help will be greatly appreciated.

    Thanks in advance
    Last edited by Melvintws; 02-24-2009 at 04:13 PM. Reason: Typo error

  • #8
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Well if you don't mind reverting to the same image on mouseout you could just do something like this (broken up over a few lines to make it easier to read):
    Code:
    <img 
      id="gif_1" 
      src="3fingers.jpg" 
      alt="whatever" 
      onmouseover="document.getElementById('gif_1').src='3fingers.gif'" 
      onmouseout="document.getElementById('gif_1').src='3fingers.jpg'" 
    />
    You would make a still of the first frame of the gif and save it as a JPEG, then upload the files into the same directory as the HTML file (or alternatively you could put them in any directory you wanted so long as you update the file paths from the example above). I haven't tested this code for syntax in an actual page, but I believe it is all correct. Give this a shot and let me know if this is what you're looking for.

    Having the image stop dead on the frame it was on when the user moved the mouse away is more complicated...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #9
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi, Rowsdower,

    Thanks for the prompt reply.

    However I think I did not make myself clear enough on my previous post.

    What I'm trying to do is to play a gif animation when I mouse over button A.

    The gif animation is a gif image that will be played outside button A.

    When I mouse out of button A, the gif animation will stop playing and revert to it's first frame.

    So there are basically 3 things involved:

    1) a button (starts playing gif animation on mouseover)

    2) a static gif image( when mouse out of button)

    3) an animated gif (that starts playing on mouse over button A)

    Most importantly, the gif animated image and the the button are not placed together.
    They are two separate elements.

    Sorry for not making myself clear previously.

    I really appreciate your help, Rowsdower.

    Hopefully you can help me out on this.

    Many thanks for your time
    Last edited by Melvintws; 02-25-2009 at 11:10 AM. Reason: Typo error

  • #10
    Regular Coder
    Join Date
    Dec 2008
    Location
    Tannhäuser Gate
    Posts
    286
    Thanks
    7
    Thanked 58 Times in 57 Posts
    A place for your animation:
    Code:
    <img id="gif_1" src="3fingers.jpg" alt="whatever" />
    And then make your button - in this case it is another image [my_button.jpg], but you're free to use whatever page element you want, just keep onmouseover/onmouseout:
    Code:
    <img id="button" src="my_button.jpg" alt="whatever" 
      onmouseover="document.getElementById('gif_1').src='3fingers.gif'" 
      onmouseout="document.getElementById('gif_1').src='3fingers.jpg'" 
    />
    As a link:
    Code:
    <a href="#" onclick="return false;" 
      onmouseover="document.getElementById('gif_1').src='3fingers.gif'" 
      onmouseout="document.getElementById('gif_1').src='3fingers.jpg'">
     Hover over me to start animation.</a>

  • #11
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, freedom_razor!

    Works well. Thank you so much taking your time to help out a newbie like me

  • #12
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Timed gif changes, ungreying of form - im going crazy

    hello coding gurus,

    ive been trying to figure something out for a couple of weeks now, and ive tried reading the well knowledged posts before mine but unfortunately I cannot get this to work. maybe this is because i have no coding skill or im just not capable, but i have faith that someone may be nice enough to help someone in distress.

    heres the problem:

    user fills info into a couple boxes and chooses a selection from a dropdown box. (no validation, he can enter anything or choose any option from the drop down)
    user clicks submit button.
    under submit button now displays animated gif showing a 'checking' kind of graphic, like its checking for validation with stripes moving across.
    after a set amount of time, (4 seconds) the once moving gif, now becomes a static 'accepted' gif and ungreys a form below for more user details.

    can anyone help me?


    Thanks to all in the forum
    Andy

  • #13
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    3
    Thanks
    0
    Thanked 1 Time in 1 Post

    A gif animation for my site

    I am re-working for my site http://beta-1-3d-glucan.com, I am planning to have a picture animation at the Beta-1,3D Glucan picture at the right top of the page. I would like to have the picture and some title altered and animated. I hope you experts could give me an advice on what software I may use in doing this. Or is there any training and trials about this? Thanks in advance.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •