Bonjour / Bonsoir !

Il y a longtemps maintenant, j'avais réussi à attraper sur ce forum un code Javascript pour "allumer" une image, progressivement, à placer dans le template "overall_header". Bref, c'était quelque chose de très utile mais voilà: je me suis rendu compte que...

onmouseout (la base, quand on ouvre le forum): opacité de 100%.
onmousehover: opacité de 100%.
onmouseout (à nouveau): opacité de 50%.

Donc voilà le problème: j'aimerais que de base, les images soient de 50%. J'ai longtemps cherché sur des forums, dont celui-ci une réponse à cette question... mais je n'ai rien trouvé. En fait, j'avais trouvé d'autres codes mais aucun ne me proposait de choisir une classe pour mettre cette opacité progressive.

Pour être plus clair: j'aimerais que les images dotées de la classe ".lumiere" s'allument progressivement. C'est ce qu'il se passe... mais de base, elles ne sont pas à 50%, ce qui est peu esthétique.

Bref, voici le code que j'ai en ce moment:

Code:

    $(document).ready(function() {
    $('.lumiere').each(function() {
            $(this).hover(function() {
                $(this).stop().animate({ opacity: 1.0 },500);
            },
          function() {
              $(this).stop().animate({ opacity: 0.5 },500);
          });
        });
    });

Comme dit, il marche très très bien, mais j'aimerais rajouter que, de base, les images de la classe ".lumiere" soient de 50% (soit 0.5). Malheureusement, je n'y connais que dalle en JS et, malgré mes efforts (j'ai essayé de rajouter une fonction, un $, tout ça...) je ne suis arrivée à rien.

Est-ce que quelqu'un pourrait me dire où est-ce que ça ne va pas ? Ce qu'il faut rajouter ? Merci beaucoup de votre aide. ♥

P.S: Je ne savais pas trop où poster cet appel à l'aide, et j'ai pensé que c'était plutôt dans "Aide" qu'autre chose.

Salut,
Je ne casse pas des briques en javascript mais as-tu essayé de passer par le CSS ? Avec un effet de transition de 1 seconde et une opacité de base de 0.5 on a le même rendu qu'avec la javascript je pense.

Tu pars du principe que la balise pour les images est : .lumière et pour la la balise au passage de la souris tu as .lumiere : hover.

Après si pour une autre raison tu souhaites vraiment passer par la Javascript je ne peux pas t'aider, navré

Hello

J'ai demandé à mes supérieurs qui s'y connaissent en JS de t'aider ^^

Citation :

Comme dit, il marche très très bien, mais j'aimerais rajouter que, de base, les images de la classe ".lumiere" soient de 50% (soit 0.5). Malheureusement, je n'y connais que dalle en JS et, malgré mes efforts (j'ai essayé de rajouter une fonction, un $, tout ça...) je ne suis arrivée à rien.

Il faut ajouter l'opacité de base dans ton css, à la classe lumiere :ok:
Et comme l'as dit Safran, inutile d'utiliser du js pour si peu, tu peux très bien faire ça en css.

Merci beaucoup à vous tous! (et désolé du retard, ordi en panne, toussa)

Effectivement, ça marche très bien en reprenant dans la classe "lumière" une opacité de base xD J'y avais pas pensé du tout, j'suis du genre à me compliquer la vie pour rien...

Merci encore une fois ! ^_^

- PROBLEME RESOLU \o/