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
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.
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">
...
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.
Reply With Quote
Bookmarks