28172 sujets

CSS et mise en forme, CSS3

[Résolu]Un rollover paticulier ...[/Résolu]

Bonjour à tous Smiley smile

Je suis pas certain d'être dans la bonne catégorie (c'est un peu dû au contenu même de ma question comme vous allez le voir)

J'ai trouvé sur le site de la fifa à ce lien : http://fr.fifa.com/worldcup/index.html un rollover très interessant. Il se trouve dans la barre de menu horizontale qui se trouve vers le haut de la page. En utilisant firebug, j'ai pris l'image utilisée dans ce rollover (qui est très joli au passage) et me suis rendu compte qu'il s'agit d'une seule image contenant deux images superposées.
Je me demande si quelqu'un serait capable de me dire comment est fait le rollover là-dessus Smiley confus
J'ai effectivement l'habitude d'utiliser deux images en une (comme eux) et pour réaliser le rollover, je change juste le 'background-position' et le tour est joué...par contre, dans ce cas-ci...je bloque et je me demande s'il n'y a pas une histoire de script derrière ...

Merci de vos réponses
Modifié par nickyla (21 Dec 2009 - 22:14)
Hello,

Pourrais-tu préciser quelle partie du menu est concernée par ton interrogation ?
Je n'ai vu aucun rollover qui soit "particulier" dans ce menu, a priori Smiley cligne
Salut nickyla et bienvenue,

je ne suis pas sûr non plus de ce que tu veux dire : il s'agit juste de la méthode des sprites.

A noter que dans le cas présent cela pose un problème d'accessibilité en cas de css activé et d'images désactivées à cause des SPAN en visibility: hidden (cf. Remplacement d'images : halte au display none).
Modifié par Heyoan (19 Dec 2009 - 04:10)
Heyoan a écrit :
Salut nickyla et bienvenue,

je ne suis pas sûr non plus de ce que tu veux dire : il s'agit juste de la méthode des sprites.

A noter que dans le cas présent cela pose un problème d'accessibilité en cas de css activé et d'images désactivées à cause des SPAN en visibility: hidden (cf. Remplacement d'images : halte au display none).


Salut Heyoan et merci pour ta réponse.

Il s'agit là effectivement de "sprites" qui est une technique que je ne connaissais pas avant (tu sais, y en a tellement...)

Et pour ce qui est de la compatibilité, c'est clair! d'autant plus que ça utilise des ":hover" qui ne sont pas pris en charge par toutes les versions des navigateurs (je pense à IE6 par exemple)
Sujet clos
Aller à