CODEWITHSUNDEEP
javascriptanimated-gif
Wim ten Brink
Wim ten Brink

Reputation: 26682

Displaying single image from a multi-image (animated) GIF file

Simple question, really. I just don't have the knowledge to do this with JavaScript, and to also make sure it works with (almost) all browsers...
I am going to design a set of images of a person pointing with one hand in several directions. (Up, down, left, right, diagonal, etc.) Basically, this puppet will be pointing at the location of the mouse. To do so, I want to use an animated GIF file to contain all the images and then use JavaScript to bring the right image to the front, based on the position of the mouse in relation with the image.
My knowlegde of Javascript is very limited, though. Before I even start creating the GIF images, I want to know if it's possible and if there's a solution that would work on any web browser. (Unless it doesn't support JavaScript, of course.)
I know it's possible to delay an animated GIF from JavaScript but is it also possible to modify the exact image that needs to be displayed?

Upvotes: 0

Views: 760

Answers (1)

Pekka
Pekka

Reputation: 449395

As far as I know, this is not possible.

Stuff like this is usually done using the "CSS sprites" technique, where the various stages are glued next to each other into one giant image. That image will then be used as background-image in a smaller element. background-position will determine which image is shown.

Whether this works for you will depend on whether your images are all the same size or not. It has the advantage of working reliably in all browsers, even IE6.

Upvotes: 4

Related Questions