SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Image Sequences & Hovering

    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:

    Code JavaScript:
    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. #2
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Like an animated .gif but not...

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by bo5ton View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by bo5ton View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by bo5ton View Post
    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.

    Quote Originally Posted by bo5ton View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by bo5ton View Post
    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:

    Code javascript:
    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'
    ]);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Great, thanks Paul. I'll see how I go.
    Cheers.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •