CSS Sprites pour onglets

Bonjour, j'ai lu ce tuto ici sur les Sprites CSS et j'ai bien compris. Mais j'ai remarqué les onglets sur le site de la fifa qui sont géniaux. J'ai compris qu'il l'ont fait avec les Sprites CSS mais en plus fort. Voici l'image d'arrière plan qu'ils ont utilisé. . Comme vous allez le constater, chaque ligne d'image est destinée à lien en particulier derrière lequel se place l'onglet sombre. Mais l'arrière plan change aussi pour tous les autres liens. Certainement, aucun arrière plan n'est défini par défaut pour les liens individuels, mais peut-être pour leur élément conteneur qui affiche une ligne d'onglet de l'image, ce qui donne l'illusion de ce que nous voyons. Je suppose que si l'arrière plan était appliqué aux liens, il ne pourrait déborder la largeur du lien survolé ou sélectionné et paraître également derrière les autres. Je demande comment ils ont pu réalisé cela. Serait ce par javascript ?

Bonjour,
L'arrère plan est mis sur le conteneur de tous les liens, et une classe est définie pour chaque lien (ce ne sont d'ailleurs pas des liens, mais des éléments de liste).

quand tu cliques sur "video" par exemple, la classe du conteneur est changée via javascript et donc la position du background change aussi:

Pour les videos:

#nr_tabs.bgTabVideo{
background:url("http://img.fifa.com/imgml/worldcup/newsreader/nr_tabs.png") no-repeat scroll 0 -105px transparent
}

Pour les photos:

#nr_tabs.bgTabPhoto{
background:url("http://img.fifa.com/imgml/worldcup/newsreader/nr_tabs.png") no-repeat scroll 0 -158px transparent
}

C'est habile, mais il faut être sûr de la taille de ses onglets.

J'espère avoir répondu à ta question.
Modifié par loicbcn (14 Nov 2010 - 11:06)

etoileweb a écrit :
Je suppose que si l'arrière plan était appliqué aux liens, il ne pourrait déborder la largeur du lien survolé ou sélectionné et paraître également derrière les autres.

Oh ça serait possible, en jouant avec du positionnement relatif et du z-index pour l'empilement, et sur des marges négatives. J'ai déjà fait des trucs du genre, à part la compatibilité IE7 (ou seulement IE6?) ça se fait assez facilement. Si on le fait bien on peut même avoir une image de sprites plus légère, un nombre d'items illimité et des largeurs d'items fluides.

etoileweb a écrit :
Je demande comment ils ont pu réalisé cela.

Pourquoi ne pas utiliser un outil tel que Firebug et mener toi-même l'enquête, en utilisant le mode «Inspection» (onglet HTML)? Ça te permettrait de découvrir par toi-même ce que loicbcn explique ci-dessus.