Image Sequences & Hovering


I’ll make it quick:

I need advice for 3 things.

  1. Having an image load while:
  2. A sequence of images loads and repeats until:
  3. A User hovers over the image and it displays a different sequence of images and then stops

What do you think is the best way of achieving this? Something like this:

var image = document.getElementById('initialSequence');
image.images = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg'];
image.counter = 0;

image.onmouseover = function () {
    this.counter += 1;
    this.src = this.images[this.counter];


Like an animated .gif but not…

Is there a reason why an animated image wouldn’t be suitable? Animated png images allow for decent quality these days.
It would also makes the animation more accessible too.

The only thing I was worried about that was for the sake of browser incompatibilities.
As far as I know doesn’t only Firefox allow for APNG etc? If I could take this route(image actually animated) I’d really prefer to!

What sort of things are you animating? Amimated gif’s are fully supported, and are suitable for many types of situations.

They are of graphical characters from a game. So quite intense and I thought that .gif would diminish the quality too much? I guess I could give it a go.
Then I would only need to worry about displaying each image, and would only need to change the .gif on mouseover, and they would be a lot smaller/quicker to load.
I would like to have them pre-loaded though.

Not necessarily at all. Game sprites are a very good use for animated gifs.

They can be pre-loaded using the same techniques to preload any other image.

I’ll do that and see how I go.

I don’t know javascript at all sorry, but is that what you would use to pre load the images?


Perhaps with something like this:

function preload(images) {
    var image = [],
    for (i = 0; i < images.length; i += 1) {
        image[i] = new Image();
        image[i].src = images[i];

Great, thanks Paul. I’ll see how I go.