11 Re: HTTP Requests

Nice write up with some good examples. Thanks Dave.

This basic idea had occurred to me a while ago for just the reason that Dave Marks mentions in his comment above. I was going to demonstrate it by doing Amazon’s nav bar in CSS with one master image. Needless to say, I didn’t get round to it. Such a simple nav bar lends itself perfectly to this technique.

I have seen this technique (or a variation of it) in use already:

http://www.smithpaul.com/archives/2004/03/03/indepth_css_sidebar_titles.php”

However, it breaks if you resize the text – so you need to stick to images.

posted at 10:01 am on March 5, 2004 by Will

12 Single image?

Good, well written, expansion on a well known technique, and as already pointed out, your demonstration shows good examples.

In regard to single image vs lots of images…
1) As already mentioned there will be some memory saved by combining images that share the same pallet.
2) In particular, GIF images can store long solid-colour horizontal lines in very small memory space.
3) Splitting in to many images allows most peoples web browsers to download them faster because they can be downloaded simultanseously (only helps of fast connections).
4) I may have missed it in the article, but I don’t think you mentioned the main reason for having a single image, is if you had a different ‘after’ image, it would not start downloading intil you hover over it, (So putting the before and after images in a single file removes the need for a JavaScript ‘pre-loader’).

Here’s another example of this technique in use: http://www.alpha-matrix-design.co.uk
I’d welcome comments and constructive criticism, but direct it to me not to this discussion board.

posted at 10:33 am on March 5, 2004 by LazyJim

13 Blown Away...

Yet again, I am blown away by the amazing power of CSS. Thank you for illuminating this technique. I am sure there are many who will find amazing ways to use this.

posted at 11:06 am on March 5, 2004 by Joshua Brewer

14 Doesn't seem to work on IE6

I checked out the example with the skyline and nothing happened. Maybe a settings issue?

posted at 11:11 am on March 5, 2004 by Eric Marcoullier

15 sexy

that’s all I can say. It is sexy!

posted at 11:13 am on March 5, 2004 by janis:L

16 ... or in Camino

Not seeing anything spiffy about the skyline in Camino either.

posted at 11:29 am on March 5, 2004 by Stephanie

17 Caching Quirks

Thanks all for the feedback so far!

To those experiencing browser discrepencies — it’s possibly related to cache. If you’ve configured your browser to ‘Check for new page every time’ or similar, it may be trying to re-download the image for every hover. Leave your mouse over the link a bit longer, give it a chance to show up, and it should.

Also keep in mind that this is mostly a developer setting. End users won’t usually have this selected, so you needn’t worry about it too much.

posted at 11:41 am on March 5, 2004 by Dave S.

18 Don't shoot the new guy...

A number of folks mention that this technique degrades nicely. When people say as such, are they including browsers like Netscape 4.x?

I am just curious because this technique doesn’t degrade well at all with Netscape 4.79.

I’m still learning and justed wanted some clarification in this regard. Thanks.

posted at 12:08 pm on March 5, 2004 by Jason M.

19 Caching... 1, 2, 3...

Lovely concept Dave, but I’m showing the re-download for every cache setting: always, auto, never… the hover-delay hounds me. It’s unnatural. IE6, Win2K

posted at 12:17 pm on March 5, 2004 by Peter Richardson

20 Awesome

Great work Dave. Well-written, great examples, everything in there was extremely well done.

I’ll definitely be saving this article for future use. The irregular shapes will come in handy some day – not sure when, but it’s only a matter of time. :)

posted at 12:30 pm on March 5, 2004 by Mark Hurd