Replaying a non-looping gif

Daniel Carrol asked me if i knew a way to replay/restart a non-looping gif in Lectora. Codewise that wasnot too difficult, the biggest challenge is to target the proper element in the html.

Using Firebug or other browser development tools ( both IE and Chrome have them too ) you can check what html name an element has…where the source for it resides… and then you know what to target.

If you check my code, you see that when the document is loaded i target the source for the gif here:

explosionGif = document.getElementById(“anim39”).getElementsByTagName(‘img’);

In Lectora you can see what html name the container/placeholder for the Gif animation gets ( animimage39 ), and then you know what to call with your javascript to target the source gif.

Actually i do think using spritesheets would be better for this kind of animation. Will make a sample of that soon…


Preview image

Tags: , , ,


  1. Profile photo of Sergey Snegirev
    Sergey Snegirev

    There is an easier way (for a non-developer) to check the HTML name if they want to reuse the code. In Lectora, select the GIF animation, go to Properties tab, locate the IMAGE section on the left hand side of the ribbon, click the little “pop-out” arrow icon in the bottom right corner of that section. It will show the HTML name for that object. Or you can just hover mouse over that icon.

  2. Profile photo of Math Notermans
    Math Notermans Post author

    As Sergey mentioned indeed the easiest way to indeed check the HTML name.
    But in this case that gives you the name of the placeholder Lectora uses for displaying inside the editor. In my sample that is animimage39. Targeting that name gives no result when you want to change the source of the gif. But for most html elements using it as Sergey mentions you can work with that name…

Your email address will not be published. Required fields are marked *