www.webdeveloper.com
Results 1 to 6 of 6

Thread: NEED HELP: Animated gif to respond to click of a button.

  1. #1
    Join Date
    Feb 2013
    Location
    Uk
    Posts
    8

    NEED HELP: Animated gif to respond to click of a button.

    Hi I have a button which I need to use to activate a gif image, I need the animation to pause or not play until the button has been clicked. I am sure there will be a simple explanation but I have been scratching my head and keep hiting brick walls can anybody help?

    The code for the button and the animated gif are placed below, also all the code within these sections are relevant, PLEASE HELP

    Button

    <div id="plusmore_btn_header">
    <img style="float:left; margin-top:78px; width:380px;" src="http://www.creativdesigns.com/wp-content/themes/CreativDesigns/images/plustext.png" alt="web design text header" />
    <img style="margin-top:64px;margin-left:6px; width:50px; height:50px;" src="http://www.creativdesigns.com/wp-content/themes/CreativDesigns/images/cross_btn.png" onmouseover="this.src='http://www.creativdesigns.com/wp-content/themes/CreativDesigns/images/cross_btn_hover.png'" onmouseout="this.src='http://www.creativdesigns.com/wp-content/themes/CreativDesigns/images/cross_btn.png'" class="rotate_socialicons" onclick="javascript:scrollByPixels(0, 284)" value="Scroll down 500px">

    </div>


    Animated gif

    <div id="arrow_under_header ">
    <img style="float:right; width:503px; margin-right:-40px;
    height:123px;" src="http://www.creativdesigns.com/wp-content/themes/CreativDesigns/images/arrow_once.gif" id="line" alt="web design text header" />
    </div>

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,255

    Lightbulb

    So if all the code is relevant, where is...
    Code:
    onclick="scrollByPixels(0, 284)"   // javascript: is un-necessary before the function
    It would also be a lot more readable with some indentation and separate lines...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title> Untitled </title>
    </head>
    <body>
    <div id="plusmore_btn_header">
    <img style="float:left; margin-top:78px; width:380px;"
     src="http://www.creativdesigns.com/wp-content/themes/CreativDesigns/images/plustext.png"
     alt="web design text header" />
    <img style="margin-top:64px;margin-left:6px; width:50px; height:50px;"
     src="http://www.creativdesigns.com/wp-content/themes/CreativDesigns/images/cross_btn.png"
     onmouseover="this.src='http://www.creativdesigns.com/wp-content/themes/CreativDesigns/images/cross_btn_hover.png'" 
     onmouseout="this.src='http://www.creativdesigns.com/wp-content/themes/CreativDesigns/images/cross_btn.png'"
     class="rotate_socialicons"
     onclick="scrollByPixels(0, 284)" value="Scroll down 500px">
    </div>
    
    <div id="arrow_under_header ">
     <img style="float:right; width:503px; margin-right:-40px; height:123px;"
     src="http://www.creativdesigns.com/wp-content/themes/CreativDesigns/images/arrow_once.gif"
     id="line" alt="web design text header" />
    </div> 
    
    </body>
    </html>

  3. #3
    Join Date
    Feb 2013
    Location
    Uk
    Posts
    8
    on click of the button I need this two do two things, first of all scroll down 500px to where the gif is and this is when I want the gif to start animating, If you have any suggestions please let me know. The reason for this is that the header is full screen and the gif animation is situated underneath this, as the button is clicked it scrolls down to reveal more content and the animation. The animation is not on a loop it only plays once pointing to some info hence I need the delay rather than start on-load.

  4. #4
    Join Date
    Feb 2013
    Location
    Uk
    Posts
    8

    Post

    I am new to forums so please forgive me is this any better to read!

    Button


    <div id="plusmore_btn_header">
    <img style="float:left; margin-top:78px; width:380px;" src="image.png" alt="web design text header" />
    <img style="margin-top:64px;margin-left:6px; width:50px; height:50px;" src="" onmouseover="this.src='image.png" onmouseout="this.src=''image.png"
    class="rotate_socialicons" onclick="javascript:scrollByPixels(0, 284)" value="Scroll down 500px">
    </div>


    Animated gif

    <div id="arrow_under_header ">
    <img style="float:right; width:503px; margin-right:-40px;height:123px;" src="image.gif" id="line" alt="web design text header" />
    </div>

  5. #5
    Join Date
    Feb 2013
    Posts
    1
    As a slight variation, you could also use a bookmark link to get you to the animation location represented by a png file and then have the user click that png to start the animated gif. Clicking on the animation then stops it again, so you have start and stop. The code to do the start and stop is described at the bottom of the page:
    http://gifrecorder.com/help/Make_HTM...Start_Stop.htm. the sample code refers to a png file 'addimage.png' You should replace that with your own [gifname].png. It would require you to have two files: [gifname].png and [gifname].gif to work.
    ...
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.min.js" type="text/javascript"></script>
    <style type="text/css"> .img-swap {cursor: pointer;} </style>
    <script type="text/javascript">
    jQuery(function(){
    $(".img-swap").live('click', function() {
    if ($(this).attr("class") == "img-swap") { this.src = this.src.replace(".png",".gif"); }
    else {this.src = this.src.replace(".gif",".png"); }
    $(this).toggleClass("on");});});
    </script>
    ...
    <img alt="video gif animation" class="img-swap" src="gifname.png">
    ...



  6. #6
    Join Date
    Feb 2013
    Location
    Uk
    Posts
    8
    Can this not be activated by using a different button placed somewhere else on the site, the idea is to click a button, the site scrolls down 500px to the .giff hence this could be at any point during the visit on the site the first 10 seconds or first 60 seconds and this is why I need the .giff to start on click of another button placed elsewhere and not to start the .giff on-load.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles