CSS Navigation Sprite - Formes impaires (non carré)

Question

Je n'ai généralement aucun problème avec les sprites CSS, mais celui-ci m'a dérouté ... et je ne suis pas sûr de savoir comment le résoudre. Fondamentalement, j'ai un sprite de navigation qui ressemble à ceci:

J'utilise la convention standard de les poser dans <li> balises telles comme:

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

Et puis l'application CSS pour ajuster la position d'arrière-plan:

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

Bien sûr, je n'ai pas pensé à cela, mais le problème se produit en vol stationnaire. Étant donné que vous ne pouvez définir que des zones "carrées", lorsque vous survolez un élément, l'état "bleu" du survol est reporté sur l'élément de navigation suivant. J'ai alors pensé que je devrais faire des images individuelles pour chaque article ... mais cela ne fonctionnerait pas tout à fait raison non plus en raison des sections de flèche se chevauchant.

Peut-être que je dois séparer les séparateurs de flèche "entre"? Je ne suis vraiment pas sûr.

Je suis perplexe ici. Des idées?

Answer 1

Pouvez-vous recréer l'image-objet de sorte que les boutons de navigation sont empilés verticalement? Ensuite, il semble que vous pourriez utiliser des marges gauches négatives pour ajuster les boutons ensemble. De cette façon, l'espace négatif sur le côté gauche du bouton serait vide, plutôt que d'avoir une pointe de flèche dedans, donc en vol stationnaire, la cavité resterait transparente.

Answer 2

Au lieu d'une rangée de sprites « actifs », créez deux et les activer alternativement, i.e. .:

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

De cette façon, vous pouvez toujours couper une image-objet; il suffit d'ajouter à la valeur Y si l'index de votre élément est "impair" (index & 1 == 1).

Answer 3

Vous pouvez étendre votre sprite et remplacer l'état stationnaire par 5 lignes d'état de survol séparées, chacune ayant un seul bouton bleu avec une position d'état de vol stationnaire distincte pour chaque élément. La taille des fichiers ne devrait pas être trop grande.

Answer 4

Je pense que vous avez raison de devoir cuisiner une image «intelligente» qui couvre toutes vos exigences.

Il est difficile d'expliquer avec des mots, voici un lien vers un exemple: http://www.alistapart.com/d/sprites/ala-blobs2.html

Voici le lien vers la façon dont il a fait (faire défiler vers le bas pour « formes irrégulières »): http://www.alistapart.com/articles/sprites