Kommentare zu: How to: Use Image Sprites for Navigation Menu

Von: web design kent

web design kent — Fri, 22 Jan 2010 12:01:18 +0000

Thanks for the great read, some good points mentioned there.

Von: Andris

Andris — Fri, 15 Jan 2010 12:35:21 +0000

@mike: Another advantage of creating one image for each button is that you can combine CSS properties like:

#navigation li a:hover, #navigation li a.current {background-position:0 -30px;}

Otherwise you had to set a background-position for each hover state. And that would be a lot more code for a bigger navigation. Or how would you solve that problem?

Von: Andris

Andris — Thu, 14 Jan 2010 14:33:20 +0000

@mike: You’re absolutely right. To keep it simple and understandable I thought it might be better to create one image per button.

But like you said it would reduce server requests if you would put all images together in one file.

Von: mike

mike — Thu, 14 Jan 2010 13:00:33 +0000

Since you are creating and using sprites for you buttons why not create 1 sprite with all of you button images and use background positioning for the roll over states? This might reduce the overall images file size and would surely cut down on server calls for the page to load images.

Von: Andris

Andris — Wed, 13 Jan 2010 15:10:24 +0000

@Jordan: Thanx for the kind words.

Von: Jordan Walker

Jordan Walker — Wed, 13 Jan 2010 14:15:05 +0000

I would not feel ashamed for the work you put into this article.

Von: Andris

Andris — Wed, 13 Jan 2010 09:32:23 +0000

I’m really ashamed for my mistake. But hey, if I didn’t published the article I would think this technique is called Sliding Doors forever.

Von: Andris

Andris — Wed, 13 Jan 2010 09:24:10 +0000

@Erik and @Joost: I’m so sorry I was completely wrong. I’m gonna change the article right now.

Von: Erik

Erik — Wed, 13 Jan 2010 08:09:26 +0000

This technique is called sprites, sliding doors is something completely different

Von: Joost

Joost — Wed, 13 Jan 2010 07:26:44 +0000

I always thought that sliding doors referred to the technique where you have a single image made up of two parts, so that you can have, for example, rounded corners for buttons or links with a short or long text using the same image. See: http://www.alistapart.com/articles/slidingdoors/ and http://www.filamentgroup.com/lab/update_styling_the_button_element_with_css_sliding_doors_now_with_image_spr/