start animated gif from beginning

Question

I want to make a mouse effect using a gif image but the problem is that the image doesn't start from beginning. html code:
<div style="width: 100px;height: 100px;background: red;" onclick="myFunction(this,event)"></div>
javascript code:

function myFunction(ele,e)
{
var x = e.clientX - 15;
var y = e.clientY - 15;
var effect = document.createElement("DIV");
effect.style.background="url('http://s12.postimg.org/piulwsk61/image.gif')";
effect.style.backgroundSize="100% 100%";
effect.style.width="75px";
effect.style.height="75px";
effect.style.zIndex="1";
effect.style.position="fixed";
effect.style.top=y;
effect.style.left=x;
ele.appendChild(effect);
setTimeout(function(){ele.removeChild(effect);},700);
}

problem solved:
javascript code:

function myFunction(ele,e)
{
var x = e.clientX - 15;
var y = e.clientY - 15;
var effect = document.createElement("IMG");
effect.style.src="http://s12.postimg.org/piulwsk61/image.gif";
effect.style.width="75px";
effect.style.height="75px";
effect.style.zIndex="1";
effect.style.position="fixed";
effect.style.top=y;
effect.style.left=x;
ele.appendChild(effect);
setTimeout(function(){ele.removeChild(effect);},700);
}

Similar to [HTML Image Rollover - Image isn't fully loaded before rollover?](http://stackoverflow.com/questions/4580749/html-image-rollover-image-isnt-fully-loaded-before-rollover) — AJ Richardson, Sep 07 '14 at 05:25
@aj_r no, after the image loads completly, the first time I click on the div it starts from the beginning but if I click again it starts from different places. — user3926604, Sep 07 '14 at 05:34

score 5 · Answer 1 · answered Sep 07 '14 at 05:46

You cannot control the playing of an animated GIF. If you always want to start from the beginning each time, you 'll need to remove it from the DOM and re-insert it, or at least respecify the src attribute. This approach will not work if you're using CSS background as you are now.

start animated gif from beginning

1 Answers1