Opacité progressive sur certaines images

[Suk Lin]

Bonjour !

Je cherche à obtenir une opacité progressive sur certaines images, que je désigne par la class fading, néanmoins je n'y parviens pas. En fait, j'aimerai qu'à la base mon image ait une opacité de 30%, au passage de la souris elle passe progressivement à du 100% avant de retomber petit à petit vers son état initial 30% quand le curseur va ailleurs.

Cette question a été posée plusieurs fois sur le forum, mais malheureusement je n'y suis toujours pas parvenue :/


Le dernier essai que j'ai effectué est le suivant :

1. Dans le template overall_header, entre les balises head, j'ai ajouté ceci :

Code:

<script type="text/javascript">
jQuery('.fading').css('opacity',0.3).hover(
  function () {
    jQuery(this).fadeTo('slow',1);
  },
  function () {
    jQuery(this).fadeTo('slow',0.3);
  }
);
</script>

2. Dans la description de mon sous-forum, j'ajoute la class="fading" dans <img>, ce qui donne par exemple :

Code:

<img src="blabla.jpg" class="fading"></img>

Mais après cela, mon image reste désespérément... normale A mon avis, je dois mal placer mon script, enfin c'est juste une intuition !

Si quelqu'un peut situer mon erreur et m'aider, je lui en serai fort reconnaissante !

Merci d'avance et bonne fin d'après-midi (:

[Suk Lin]

Bonne nouvelle, je suis parvenue au résultat obtenu ! Néanmoins j'ai procédé d'une autre façon, c'est-à-dire en utilisant une feuille externe cette fois-ci.

J'explique ma résolution afin que cela puisse aider quelqu'un d'autre si besoin :


1. Créez une feuille de style externe (ouvrez Bloc Note et enregistrez en .js) et écrivez-y :

Code:

$(document).ready(function(){
                    $(".fading").fadeTo("slow", 0.3); // This sets the opacity of the thumbs to fade down to 30% when the page loads
                    $(".fading").hover(function(){
                    $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
                    },function(){
                    $(this).fadeTo("slow", 0.3); // This should set the opacity back to 30% on mouseout
                    });
                    });

$(document).ready(function(){
                    $("#text p").fadeTo("slow", 0.3); // This sets the opacity of the thumbs to fade down to 30% when the page loads
                    $("#text p").hover(function(){
                    $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
                    },function(){
                    $(this).fadeTo("slow", 0.3); // This should set the opacity back to 30% on mouseout
                          });
                    });

$(document).ready(function(){
                    $("#div").fadeTo("slow", 0.3); // This sets the opacity of the thumbs to fade down to 30% when the page loads
                    $("#div").hover(function(){
                    $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
                    },function(){
                    $(this).fadeTo("slow", 0.3); // This should set the opacity back to 30% on mouseout
                          });
                    });

2. Hébergez votre .js et retenez l'url du fichier


3. Dans votre PA > Général > Forum > Configuration > Description du site*, recopiez ceci en remplaçant l'url par celle précédente :

Code:

<script type=text/javascript src="votre_url.js"></script>

4. N'oubliez pas d'ajouter la class="fading" dans <img>, ainsi par exemple :

Code:

<img src="url_de_l'image" class="fading"></img>

Voilà voilà, je mets donc le post en résolu !

Bonne soirée !