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

This site is best viewed in a modern browser with JavaScript enabled.

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

CreativDesigns

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>

Animated gif

JMRKER

So if all the code is relevant, where is...

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

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

CreativDesigns

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.

CreativDesigns

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

Button

Animated gif

uildriks

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_HTML_page_with_Gif_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.
...
[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]

CreativDesigns

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.