CSS Navigation Sprite - Forme dispari (non quadrato)

Question

Generalmente non ho problemi a creare folletti CSS, ma questo mi ha messo per errore ... e non sono sicuro di come risolverlo. Fondamentalmente ho un folletto di navigazione che assomiglia a questo:

Sto utilizzando la convenzione standard di loro posa in <li> tag tali come:

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

e poi applicare i CSS per regolare la posizione dello sfondo:

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

Naturalmente non ci ho pensato, ma il problema si verifica al passaggio del mouse. Poiché è possibile definire solo aree "quadrate", quando si passa con il mouse su un elemento, lo stato di hover "blu" viene trasferito alla voce di navigazione successiva.

Ho quindi pensato che avrei dovuto creare singole immagini per ogni articolo ... ma non funzionava perfettamente a causa delle sezioni di freccia che si sovrappongono.

Forse dovrei separare i "separatori di frecce" tra "? Non sono davvero sicuro.

Sono qui perplesso. Qualche idea?

Answer 1

Potrebbe ricreare la sprite in modo che i pulsanti di navigazione siano impilati verticalmente? Quindi sembra che potresti usare margini negativi negativi per adattare i pulsanti. In questo modo, lo spazio negativo sul lato sinistro del pulsante sarebbe vuoto, piuttosto che avere una punta di freccia in esso, quindi, al passaggio del mouse, la cavità rimarrebbe trasparente.

Answer 2

Invece di una fila di sprite "attivi", crea due e attivare alternativamente, cioè .:

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

In questo modo, si può sempre tagliare una sprite; devi solo aggiungere al valore Y se l'indice del tuo elemento è "dispari" (index & 1 == 1).

Answer 3

È possibile estendere lo sprite e sostituire lo stato di hover con 5 righe separate di stato hover, ognuna con un solo pulsante blu con una posizione di hover separata per ciascun elemento. La dimensione dei file non dovrebbe essere eccessiva.

Answer 4

Penso che tu abbia ragione a dover cucinare un'immagine "intelligente" che copra tutte le tue esigenze.

E 'difficile da spiegare a parole, ecco un link ad un esempio: http://www.alistapart.com/d/sprites/ala-blobs2.html

Ecco il link per come è fatto (scorrere fino a 'forme irregolari'): http://www.alistapart.com/articles/sprites