Id’ be happy to see your example and any improvements you might like to make.

I just put these ideas out there and expect people to take them and improve on them or find different ways of doing the same things.

That’s the fun of CSS

However, I’m not quite sure you have grasped what’s going on in the above demo though because I can’t see an easier way to change all the other menu states without overlaying the whole row and without adding extra HTML and loads of separate images. You could nest a span and swap the image into the span while overlaying the whole row in the anchor but that really wouldn’t compete with what my version can offer.

Remember that my example allows all the other image states to change slightly at each stage also. The example I posted only shows the highlighted items with a glow but the graphic does bleed into the menus either side slightly which you can’t do with a single sprite image because it’s different for each menu.

This technique actually allows for a gradient, shadow, sunburst effect or glow to radiate out to the edges from each menu item selected and therefore the whole row could be different for every selection and would need to have a complete row image for every selection. There would be no room for slicing because each row is a separate unique image.

The image matrix would be the only way to do this.

Therefore I would be glad to see your example that competes on the same terms and not simply a single image swap as that wasn’t the point of the article. You must be able to effect a change to every other menu item and have the ability for the whole image to vary with each menu item.

Because that’s what my example can do

Why don’t you use a sprite map instead of a full image matrix?, the image could easily be a 1/4 the size, it would take just a little bit more CSS, but that’s what we are good at, right?

I would be happy to provide an example.