rocknbil - 3:52 pm on Mar 13, 2012 (gmt 0)
But, I was hoping not to use a combined, single image...
Why would you *not* want to do this? every image you load on a page is a request to the server, even a preload script. Every request is a hit on page load time. Plus, as mentioned, once the single image loads, there's no "delay" on mouseover. Everything is already loaded. Second, images are not just "pixels" and their cumulative file size is greater than the pixel dimensions. Translation: a group of images combined into one image will be smaller in file size than all the images individually. (It's not much, but every byte counts.)
Sprites allow you to load a single image and position them as needed using background-position, and once you get the hang of it it's very easy. You can have a single navigation image that would normally be 20 images when you include mouseovers, without delays on load or mouseover.