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

@CreativDesignsFeb 09.2013

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?

~~[B][COLOR=”#FF0000″]~~Button[/COLOR][/B]

</div>

~~[B][COLOR=”#FF0000″]~~Animated gif[/COLOR][/B]

to post a comment

JavaScript

5 Comments(s) _↴

@JMRKERFeb 10.2013 — #So if all the code is relevant, where is...

<i>
 </i>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...

<i>
 </i>&lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="utf-8" /&gt;
 &lt;title&gt; Untitled &lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div id="plusmore_btn_header"&gt;
 &lt;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" /&gt;
 &lt;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"&gt;
 &lt;/div&gt;
 
 &lt;div id="arrow_under_header "&gt;
 &lt;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" /&gt;
 &lt;/div&gt; 
 
 &lt;/body&gt;
 &lt;/html&gt;

@CreativDesignsauthorFeb 10.2013 — #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.

@CreativDesignsauthorFeb 10.2013 — #[B]I am new to forums so please forgive me is this any better to read!

Button[/B]

<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>

[B]Animated gif[/B]

<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>

@uildriksFeb 11.2013 — #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:

[URL]http://gifrecorder.com/help/Make_HTML_page_with_Gif_Start_Stop.htm[/URL]. 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.

...

[FONT=Helvetica Neue]<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">

...[/FONT]

[FONT=Helvetica Neue]

[/FONT]

@CreativDesignsauthorFeb 11.2013 — #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.

Also in #JavaScript _↴

Please, help with a link to two iframes...Function returns false but action goes ahead anyway...New windows

Success!

Help @CreativDesigns spread the word by sharing this article on Twitter...

Tweet This

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

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

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

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴