CSS Navigation Sprite - Odd Shapes [not square]

Question

Hey there everyone.

I usually have no problems with making CSS sprites, but this one has got me stumped...and I'm not sure how to solve it. Basically I have a navigation sprite that looks like this:

http://cl.ly/aa4a5e78eda252e8f4d7

I'm using the standard convention of laying them out in <li> tags such like:

<li class="welcome"><a href="#" title="welcome">welcome</a></li>

And then applying CSS to adjust the background position:

#navigation li.welcome a {

width:155px; background-position:-0px -46.5px; }

Of course I didn't think of this, but the problem happens on hover. Since you can only define "square" areas, when you hover over an element, the "blue" hover state is being carried over to the next navigation item.

I then thought that I'd have to make individual images for each item...but that wouldn't work quite right either because of the overlapping arrow sections.

Maybe I have to seperate out the "in between" arrow seperators? I'm really not sure.

I'm stumped here. Any ideas?

Answer 1

Instead of one row of "active" sprites, create two and activate them alternatively, i.e.:

  active > inactive > active > inactive ...
  inactive > active > inactive > active ...

This way, you can always cut a sprite; you just have to add to the Y value if the index of your element is "odd" (index & 1 == 1).

Answer 2

You could extend your sprite and replace the hover state with 5 separate lines of hover state, each one having only a single blue button with a separate hover state position for each item. The files size shouldn't be too much greater.

Answer 3

I think you're right about having to cook up a 'clever' image which covers all your requirements.

It's difficult to explain in words, here's a link to an example: http://www.alistapart.com/d/sprites/ala-blobs2.html

Here's the link to how it's done (scroll down to 'Irregular shapes') : http://www.alistapart.com/articles/sprites

Answer 4

Could you recreate the sprite so that the navigation buttons are stacked vertically? Then it seems you could use negative left margins to fit the buttons together. This way, the negative space on the left side of the button would be empty, rather than have an arrow tip in it, so on hover, the cavity would remain transparent.