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?
views:
17answers:
1
+3
A:
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.
Pekka
2010-10-22 10:15:39
CSS Sprites add a nicer solution, since it allows me to use a JPG or PNG file instead. :-) The images will be all the same size, so no problem there.
Workshop Alex
2010-10-22 15:00:42
@Workshop then it'll work fine. There are even tools to "compile" sprite images from single images. Just glue them together in one long line and set `background-position` to the correct x position
Pekka
2010-10-22 15:03:51