Image Sequences & Hovering

[bo5ton]

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.

[bo5ton]

Like an animated .gif but not...

[paul_wilkins]

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.

[bo5ton]

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!

[paul_wilkins]

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.

[bo5ton]

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.

[paul_wilkins]

They are of graphical characters from a game. So quite intense and I thought that .gif would diminish the quality too much?

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

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.

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

[bo5ton]

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.

[paul_wilkins]

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.

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'
]);

[bo5ton]

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