Image Sequences & Hovering

JavaScript
1

Hullo!

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];
}

Thanks.

2

Like an animated .gif but not…

3

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.

4

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!

5

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

6

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.

7

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.

8

Excellent.
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?

Thanks.

9

Perhaps with something like this:


function preload(images) {
    var image = [],
        i;
    for (i = 0; i < images.length; i += 1) {
        image[i] = new Image();
        image[i].src = images[i];
    }
}
preload([
    'image1.gif',
    'image2.gif',
    'image3.gif'
]);
10

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