Opacité progressive sur certaines images

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Opacité progressive sur certaines images

Message par Suk Lin le Mer 19 Jan 2011 - 16:53

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 Interrog 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 (:


Dernière édition par Suk Lin le Jeu 20 Jan 2011 - 1:48, édité 1 fois

Suk Lin
*

Messages : 46
Inscrit(e) le : 30/12/2008

Suk Lin a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Opacité progressive sur certaines images

Message par Suk Lin le Jeu 20 Jan 2011 - 1:47

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 !

Suk Lin
*

Messages : 46
Inscrit(e) le : 30/12/2008

Suk Lin a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum