Menu avec boutons et fondu

Bonjour

Je viens poser ma petite question âpres plusieurs heures de recherche sur le net et âpres divers tentatives de codage.
Voila je cherche à faire 1 menu qui ressemble un peu à celui du site FG : http://www.radiofg.com/
Je parle de celui du haut ou il y a acces direct.
La il est en flash mais j'aimerai le faire à base de CSS. J'ai reussi à la faire en statique , jusque la tout vas bien mais j'aimerai maintenant avoir le meme effet ( ou à peu pres ) lorsque je passe ma sourie sur chaque boutons que l'image par dessus aparaisse en fondu et que chaque liens est son images de couleur différente.
J'ai pensé à l'opacity comme on le foit pour les défiler d'images mais je ne vois pas comment l'intéragir dans le hover.

Est ce que vous pensez que je dois oublier mon menu de cette facon ou est ce que c'est réalisable?
Si oui une petite piste m'aiderai beaucoup.

Merci

Bonjour et bienvenue

A priori, il n'y a là rien d'insurmontable...
Il te suffit d'attribuer une classe différente à chaque élément de ton menu pour pouvoir leur affecter des comportements au rollover différents.
Ensuite, il te faut créer un gif animé (qui ne tourne pas en boucle) qui passe du gris à la couleur souhaité.
Et enfin, tu appliques le gif obtenu au rollover sur ton bouton.
Modifié par Cygnus (26 Feb 2008 - 18:22)

a écrit :
Ensuite, il te faut créer un gif animé (qui ne tourne pas en boucle) qui passe du gris à la couleur souhaité.

Malheureusement les gifs qui ne tournent pas en boucle ne tourne qu'une fois sous Firefox qui met la dernière image en cache. Donc l'effet ne marchera qu'au premier hover puis ensuite plus rien...
Modifié par matmat (26 Feb 2008 - 20:19)

Bonsoir à tous,

Le menu de allhtml est sympa également dans le genre, et il n'a pas l'inconvénient évoqué par matmat sous Firefox.

Je ne sais pas très bien comment cela fonctionne...
Mais ça fonctionne

matmat a écrit :
Malheureusement les gifs qui ne tournent pas en boucle ne tourne qu'une fois sous Firefox qui met la dernière image en cache. Donc l'effet ne marchera qu'au premier hover puis ensuite plus rien...

Ah oui ?
Tiens, je ne savais pas...

6l20 a écrit :
Le menu de allhtml est sympa également dans le genre, et il n'a pas l'inconvénient évoqué par matmat sous Firefox.

Peut-être justement parce qu'il tourne en boucle ?
Modifié par Cygnus (26 Feb 2008 - 22:44)

Merci pour la piste Cygnus.
Je n'avais pas pensé au gif animé mais je préférerai éviter aussi car cela ne donne pas une grande fluidité sauf a faire 1 gif assez conséquent.
Il n'y a pas de technique de fade utilisable pour les liens comme pour du fade entre image ou texte comme on le voit?
A la limite si il faut utiliser du javascript...

Cygnus a écrit :

Peut-être justement parce qu'il tourne en boucle ?

Tout à fait arbitrairement, et en accord avec moi même, j'ai décidé que c'était du javascript...difficile d'imaginer dans un tel initial fourvoiement, qu'il pouvait s'agir d'un gif animé (et en boucle de surcroît )
je viens de trouver le bouton

Swelly a écrit :
A la limite si il faut utiliser du javascript...

Ou se passer de cet effet cosmétique dans Firefox, ce qui est aussi une option.

Swelly a écrit :

Je n'avais pas pensé au gif animé mais je préférerai éviter aussi car cela ne donne pas une grande fluidité sauf a faire 1 gif assez conséquent.

Puiqu'il s'agit d'un gif animé (et en boucle ) je trouve l'effet du menu de allhtml assez fluide, non ?
Le gif est de plus assez léger (5.57 Ko)

Ben en fait je trouve l'effet de fondu sur le site de fg vraiment jolie. Bon apres c'est vrai c'est du flash, mais j'éspérai qu'en CSS s'était jouable une fade entre 2 images par 1 rollhover
Modifié par Swelly (27 Feb 2008 - 01:01)