Restart a GIF animation when you click on a text link - text

Question

I have some GIF animations that I want to display in a webpage. Imagine a picture gallery made of GIFs that plays only once then they froze :)
I would like to restart their animation every time I click on a text link. I updated a jsfiddle I found here, that does what I want, but when I click on the GIF, not on a text link.
Let's say I have 4 GIFs, I would like something like:
restart1 text link - GIF1 image
restart2 text link - GIF2 image
restart3 text link - GIF3 image
restart4 text link - GIF4 image
http://jsfiddle.net/GS427/97/
Thank you!

Answer 1

The thing your script does that restarts the GIF animation is to change the src attribute which reloads the gif.
You can do this in many different ways, here is an example:
http://jsfiddle.net/GS427/100/
<a onclick='$("#img").attr("src","https://dl.dropboxusercontent.com/u/908148/once.gif");' href="#">this</a>
You could extract it into a JavaScript function that take the image url as parameter. For example
function changeImage(imageUrl){
$('#img').attr('src',imageUrl);
}
And then use this for example:
<button onclick="changeImage('http://image1-url')">Image 1</button>
<button onclick="changeImage('http://image2-url')">Image 2</button>
<button onclick="changeImage('http://image3-url')">Image 3</button>
<button onclick="changeImage('http://image4-url')">Image 4</button>

Answer 2

You need to assign an id to your link (a), let's use the id aniclk for this example.
Replace
this
with this:
<a id="aniclk" href="#">this</a>
Notice the id="aniclk".
You'll want to change your Javascript to this:
$(function(){
var image = new Image();
image.src ='https://dl.dropboxusercontent.com/u/908148/once.gif';
$('#aniclk').click(function(){
$('#img').attr('src',image.src);
});
});
Working example:
$(function() {
var image = new Image();
image.src = 'https://dl.dropboxusercontent.com/u/908148/once.gif';
$('#aniclk').click(function() {
$('#img').attr('src', image.src);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>This is an animated GIF that plays once.</p>
<p>If you click on it, replay animation</p>
<img id="img" height="100px" width="100px" src="https://dl.dropboxusercontent.com/u/908148/once.gif" border="1">
<p>I want to restart the animation when click on <a id="aniclk" href="#">this</a> not the image</p>
Be aware that you will need JQuery for this.