rollover images

[lifeworks]

Hi

This isn't specifically a roll-over related question exclusively. More and more when I 'Inspect element' on a roll-over link in Chrome, which clearly has two images, i see that it is infact 1 image, and the two images are stacked...

How does this work? how is only one half shown, and then the other when the roll-over is initiated?

thanks
lworks

[Airshow]

It sounds like you are describing a "sprite".

Sprites are well explained on the web, so I won't try to add anything here.

Try googling "sprite javascript css".

Airshow

[lifeworks]

Thanks, I think Ive seen the word sprite around, ill check it out!

[almostbob]

if you look at the speed report for any site, I use one at http://websiteoptimization.com/services/analyze/ , you can see why sprites are pouplar

in the table that shows overheads

icon might be 100bytes,
but there is ~220bytes in the http to download it, more overhead than content

sprite with 2 states, breaks even,
sprite with three states, more content, less overhead

[Airshow]

Hi Bob. Good point.

I was looking at a jquery plugin recently that had some 12-15 little image components in one sprite. Neat!

Airshow