CSS Navegación Sprite - Formas impares (no cuadradas)

Question

Normalmente no tengo problemas para hacer sprites CSS, pero este me tiene perplejo ... y no estoy seguro de cómo resolverlo. Básicamente tengo un sprite de navegación que tiene este aspecto:

estoy usando la convención estándar de colocación de ellos en <li> etiquetas tales como:

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

y luego aplicar CSS para ajustar la posición de fondo:

#navigation li.welcome a { 
    width:155px; 
    background-position:-0px -46.5px; } 

Por supuesto que no pensé en esto, pero el problema ocurre en el vuelo estacionario. Dado que solo puede definir áreas "cuadradas", al pasar el mouse sobre un elemento, el estado de desplazamiento "azul" se traslada al siguiente elemento de navegación.

Pensé entonces que tendría que hacer imágenes individuales para cada artículo ... pero tampoco funcionaría del todo bien debido a las secciones de flechas superpuestas.

¿Quizás tengo que separar los separadores de flecha "entre"? Realmente no estoy seguro

Estoy perplejo aquí. ¿Algunas ideas?

Answer 1

Podría volver a crear el sprite para que los botones de navegación estén apilados verticalmente? Entonces parece que podrías usar márgenes izquierdos negativos para unir los botones. De esta manera, el espacio negativo en el lado izquierdo del botón estaría vacío, en lugar de tener una punta de flecha en él, por lo que al pasar el cursor, la cavidad se mantendría transparente.

Answer 2

En lugar de una fila de sprites "activos", crear dos y activarlos, alternativamente, es decir .:

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

De esta manera, siempre se puede cortar un sprite; solo tiene que agregar el valor Y si el índice de su elemento es "impar" (index & 1 == 1).

Answer 3

Puede extender su sprite y reemplazar el estado de desplazamiento con 5 líneas separadas de vuelo estacionario, cada una teniendo solo un botón azul con una posición de estado de desplazamiento por separado para cada elemento. El tamaño de los archivos no debería ser mucho mayor.

Answer 4

Creo que tiene razón acerca de tener que cocinar una imagen 'inteligente' que cubra todas sus necesidades.

Es difícil de explicar con palabras, aquí hay un enlace a un ejemplo: http://www.alistapart.com/d/sprites/ala-blobs2.html

Aquí está el enlace a cómo se hace (desplácese hacia abajo hasta 'formas irregulares'): http://www.alistapart.com/articles/sprites