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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts

    run animated gif when link is clicked

    Hi, i was wondering how i could get an animated gif to play once a link is clicked. My site is www.marksbodyshop.org I want an animation to run before redirecting the page. My rollovers are done in jquery. If anyone has any ideas or if anyone wants to see more of my code let me know. I know you could use the animate function and complete function to call a redirect but i don't know how to do that. thank you.
    Attached Thumbnails Attached Thumbnails run animated gif when link is clicked-paintsplat.gif  

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    you can't (as far as I know) stop`an animated gif from animating - the best you can do is to save a separate file with the image that you want in a static state, show that on page load, then swap the image source to the animated gif onclick

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    All you need is an image swap script that swaps the first static image for the second animated one. Image swap scripts are one of the most common scripts there is as there were even versions that worked in Netscape 2. You should have no trouble finding one - or simply follow iBall's instructions to create your own.
    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
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,919
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    What you can do as well is scrap the animated GIF completely and create the animation using an image sprite as background of an element and changing class names of that element sequentially with JS (imitating film frames) with each class having one specific background position in the CSS.

  • #5
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    ok i added this.
    Code:
    <div  ><a href="aboutus.htm" onclick="button/paintsplat.gif" id="aboutimg_anchor"  ><img width="60%" id="aboutimg"   border="0" src="button/about-us-01.png"></a></div>
    my buttons work with jquery. I'm not really sure how to code it. The buttons are also in a div with the id position. The position element is in my defult.css and defult2.css files so it will work in all browsers.

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    the onclick needs the id of the element that it is looking to change - it really should be in a function, but you can do it like this:
    Code:
    <a href="aboutus.htm" onclick="document.getElementById('aboutimg').src='button/paintsplat.gif'" id="aboutimg_anchor"  >
    but as soon as someone clicks the "aboutus" link, they will be taken to that page and so not see the image changing. If you want to the image to run for a while beforehand it would be best to have the onclick call a function which swaps the image source then sets a timeout, making a pause before redirect.

  • #7
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    ok i know this sounds dumb but i don't know how to do that. can you help me set the timeout?

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    if I understand correctly you can do away with the <a> tag and just operate everything from the onclick on the image. let me know if I'm mistaken (timeout is in milliseconds, so 1000 means 1 second - adjust to suit):

    Code:
    <body>
    <img width="60%" border="0" style="cursor:pointer" src="button/about-us-01.png" onclick="changePic(this)"></img>
    <script type="text/javascript">
    function changePic(pic){
    pic.src='button/paintsplat.gif'
    setTimeout(function(){location.href="aboutus.htm"},1000)
    }
    </script>
    </body>

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,919
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Quote Originally Posted by iBall View Post
    what's wrong with using animated gif's. They're easy to make and I use them mainly as animated icons like for example "Loading...." animated icons.
    Nothing is wrong with them. I just proposed another alternative for a simple animation – which has the advantage of being stoppable at any point if necessary.

  • #10
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    ok that worked perfectly but i don't think it's using the jquery for the three state rollover. i don't care if the mousedown function is used. It would be cool, but i really only need the mouseover. I think you would probably put the id to point at the jquery but i'm not sure. i think the id is aboutimg_anchor. thank you so much for helping me out.all i really need is the mouse down which is about-us-02.png.

  • #11
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    maybe you could put the mouseover image in the code you gave me?

  • #12
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    would an onmouseover command work? I'm not sure where i would put it.

  • #13
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    i tried to change it to this but it didn't work.
    Code:
         <img width="60%" border="0" style="cursor:pointer" src="button/about-us-01.png" onmouseover="changepic(2)" onclick="changePic(this)"></img>
    <script type="text/javascript">
    function changePic(pic){
    pic.src='button/paintsplat.gif'
    setTimeout(function(){location.href="aboutus.htm"},1000)
    }
    </script>
    
    <script type="text/javascript">
    function changePic(2){
    pic.src='button/about-us-02.png'
    }
    </script>
    Last edited by Repatilian; 05-30-2012 at 11:07 PM. Reason: forgot some of the code

  • #14
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    i really don't care if i use jquery or not

  • #15
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    Quote Originally Posted by Repatilian View Post
    i tried to change it to this but it didn't work.
    Code:
         <img width="60%" border="0" style="cursor:pointer" src="button/about-us-01.png" onmouseover="changepic(2)" onclick="changePic(this)"></img>
    <script type="text/javascript">
    function changePic(pic){
    pic.src='button/paintsplat.gif'
    setTimeout(function(){location.href="aboutus.htm"},1000)
    }
    </script>
    
    <script type="text/javascript">
    function changePic(2){
    pic.src='button/about-us-02.png'
    }
    </script>
    close - the onmouseover works the same as the onclick, by passing "this" (which here refers to the image) to the function, but bear in mind that your functions need unique names or else they overwrite the previous one, and that javascript is case sensitive:
    Code:
         <img width="60%" border="0" style="cursor:pointer" src="button/about-us-01.png" onmouseover="changePic2(this)" onclick="changePic(this)"></img>
    <script type="text/javascript">
    function changePic(pic){
    pic.src='button/paintsplat.gif';
    setTimeout(function(){location.href="aboutus.htm"},1000);
    }
    </script>
    
    <script type="text/javascript">
    function changePic2(pic){
    pic.src='button/about-us-02.png';
    }
    </script>
    then you probably want a function to return the image to the original onmouseout IF it hasn't been clicked on...

    Code:
    function changePic3(pic){
    if(pic.src=='button/about-us-02.png'){
    pic.src="button/about-us-01.png";
        }
    }
    you're right - there's no need for jQuery in any of this...

  • Users who have thanked xelawho for this post:

    Repatilian (06-03-2012)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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