[Résolu]Fade entre deux images

Bonjour,


Je suis un grand débutant Js (en fait, je n'y connais strictement rien). Je vais m'acheter quelques bouquins et bucher ça. Pour l'instant, j'aimerai faire un effet simple, tellement simple que je n'arrive rien à trouver.

je voudrai faire passer le background-image d'un élément <li> (pour un menu bien sur) à une deuxième image lors du hover, avec un fondu.
L'idéal est de ne pas rajouter de balisage superflu au html, de pouvoir régler le temps de transition, et surtout, que le menu se dégrade sans JS (in extenso : conserver l'effet :hover si pas de JS).

Je n'attend pas que quelqu'un me ponde un code tout près (encore que j'ai rien contre je pourrai le décortiquer pour comprendre ce qui se passe ) mais quelque piste sur les fonction à utiliser, un site de premier pas serai très apprécié.

Merci d'avance, JS semble etre tellement interessant!


Modifié par eZe (20 Oct 2008 - 08:00)

eZe a écrit :
je voudrai faire passer le background-image d'un élément <li> (pour un menu bien sur) à une deuxième image lors du hover, avec un fondu.
L'idéal est de ne pas rajouter de balisage superflu au html, de pouvoir régler le temps de transition, et surtout, que le menu se dégrade sans JS

En gros tu veux un effet JS qui marche sans JS : je ne pense pas que ce soit possible

En revanche tu pourras conserver un effet de transition (sans dégradé) en CSS à l'aide du pseudo-sélecteur :hover.

Par contre je te conseille d'apprendre les bases du Javascript avant de te lancer dans les effets d'animations (tu pourras ensuite éventuellement te diriger vers des bibliothèques JS pour gagner du temps).
Modifié par SolMJ (17 Oct 2008 - 09:56)

Quand je parle de dégradation je parle de dégradation de rendu, pas d'effet visuel. La "dégradation élégante". Autrement dit, si javascript est on, le menu est on avec effet, si javascript est off, le menu marche aussi, avec de simple hover. j'ai vu des trucs très sympa en jquery dans le genre, mais des systeme trop complexe, je veux juste faire un fadeto entre deux images defini dans les css.
Modifié par eZe (17 Oct 2008 - 11:04)

Pour information, ce genre de transition peut se faire en natif avec les CSS, grâce aux CSS Transitions de CSS 3 (encore très peu implémentées par les navigateurs). En JavaScript, tout ce qu'on pourra faire c'est superposer des éléments et jouer sur leur opacité dans le temps. Mais on ne pourra pas passer d'un background-image à un autre avec un effet de fondu. (Par contre on peut modifier une couleur de fond de manière progressive, ou plutôt la modifier N fois par seconde pour obtenir un effet de fondu.)

Biensure que si c'est faisable.
JE suis même tombé sur exactement le menu que tu veux, hier.

Attend je te retrouve ça...

Rha, il m'a fallut le temps, mais le voila:
http://www.shopdev.co.uk/blog/animated-menus-using-jquery/

Calak a écrit :
Biensure que si c'est faisable.

Personne n'a dit que ce n'était pas faisable. Juste que la transition d'une image de fond à une autre, sur un même élément, n'existait pas en CSS (y compris avec les CSS Transitions proposés par Safari/Webkit, il me semble). Et que JavaScript ne permettait pas de réaliser cet effet, juste de le simuler.

Calak a écrit :
Rha, il m'a fallut le temps, mais le voila:
http://www.shopdev.co.uk/blog/animated-menus-using-jquery/

Cet exemple correspond parfaitement à ce que j'affirmais:

a écrit :
Toutes les fonctions JS d'animation ne font qu'une chose: manipuler les styles des éléments. Si les styles en question ne permettent pas un mécanisme de transition entre deux images de fond (ou si les implémentations des navigateurs ne le permettent pas), les fonctions JS ne peuvent pas l'inventer, il faut alors le «bricoler» avec deux éléments différents et en faisant varier l'opacité de chacun des deux éléments.

(Bon, ici on ne fait varier l'opacité que d'un élément, le SPAN dans le lien, mais ça implique un inconvénient important: le contenu texte du lien ne peut pas être affiché, ou bien il disparaitra au survol. D'ailleurs dans le tutoriel que tu indiques ils n'ont même pas pris la peine de placer un contenu texte caché ultérieurement. )
Modifié par Florent V. (20 Oct 2008 - 15:44)

J'ai rajouté le contenu du texte avec indentation moi-meme, pas un gros problème ça. C'est vrai que ce n'est pas ce que je cherchais mais c'est une bonne solution de secours, en attendant des solutions plus propres.