Superfast Image Rollovers

Discussion in 'HTML & Website Design' started by seedybee68, Apr 14, 2008.

  1. #1
    Back in the bad old days when the web was slow as designers we really had to worry about download times. Even when so many people are on broadband we shouldn't neglect dialup users and should still try and keep code and images as small as possible.

    With this in mind I was really impressed by a simple idea I accidentally ran across just now. It was posted way back in 2003 but I have never heard of it before.

    What 'Clagnut' suggests is rather than load three images for different states on a rollover, why not just use one image as a background with all three states already included in it and then let the css simply change the position of the background image, depending on the state. Apparently this change is much faster for the browser than swapping images in and out.

    I think there is beauty in simplicity and this idea is beautifully simple.
    Take a look for yourself.

    http://www.clagnut.com/blog/235/

    Chris
     
    seedybee68, Apr 14, 2008 IP
  2. $earner

    $earner Well-Known Member

    Messages:
    162
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #2
    It is a very good idea. I actually use it for my navigation bar.

    It requieres only one http request to the server, the image size is lower than having two separate images and you don't have to worry about pre-loading the second image, because it is already there.

    Bye
     
    $earner, Apr 14, 2008 IP