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>