?

Log in

No account? Create an account
entries friends calendar profile Elf Sternberg's Pendorwright Projects Previous Previous Next Next
CSS Sprites - Elf M. Sternberg
elfs
elfs
CSS Sprites

It seems like such a stupid thing, but hey, now I know how to use CSS sprites.

Basically, it’s the same idea as a viewport slider: treat your rectangular space as a viewport onto a background image. By using the background-position attribute and the .css() control (in jQuery; there are others in other libraries), you can move the background image around. If you have two different icons of the same dimensions, you can make the DIV (or whatever rectangle you want) the same size as one of them, and concatenate all of the images together (either left/right or top/bottom). The first image will show up in the DIV. When you want the other image to show up, set the background position to the negative (left or top) of the width or height (respectively), and it’ll slide your first image out of view and show the second one.

I discovered this when I saw that Firefox was making a round-trip every time I hit the end of a paginator, because it was fetching the “enabled”/”disabled” buttons that the previous programmer had built there. A round trip for every action? My gods, you’d better save that for state control, not special effects. Anyway, it’s working now, and no more “fetches from the database” to get even a 302 (item cached) transaction.

This entry was automatically cross-posted from Elf's technical journal, ElfSternberg.com

Tags: ,

1 comment or Leave a comment
Comments
featheredfrog From: featheredfrog Date: September 6th, 2009 11:17 pm (UTC) (Link)
Have you ever considered posting (perhaps sanitized) examples of the topics here?
1 comment or Leave a comment