Post Archive

› May 4, 2004

One image to rule them.

  • Reported by Tony

Didier Hihorst, over at Superfluousbanter, has posted a very good walkthrough on how to create a navigational matrix. What's a navigational matrix you ask? It's using a single image for your navigation, and then shifting the images via CSS.

Comments

1. May 4, 2004 02:12 PM

Quote this comment

Nate Posted…

Oh cool - sort of like Dave Shea's CSS Sprites article, but more specifically for tabs - and they freaking overlap too - damn.

2. May 5, 2004 02:40 PM

Quote this comment

patrick h. lauke Posted…

it does seem like a logical extension to pixy's method...but it's good somebody put it down on paper, so to speak.

the only problem is that, just to state the obvious, it doesn't scale. yes, you could use a relative size like EM instead of pixels, but then the image would most likely look crude at anything but the "optimal" chance setting where the calculated size actually matches the true pixel size 1:1. oh, how i long for SVG to be a viable solution...(and who knows, with the way MS' whole GUI will be working - XAML/Avalon/Sparkle and all - there just might be a way to do a bastardised hybrid vector graphic implementation with the next Longhorn-embedded web browser).