Opacité progressive sur certaines images
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Opacité progressive sur certaines images
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 :
2. Dans la description de mon sous-forum, j'ajoute la class="fading" dans <img>, ce qui donne par exemple :
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 (:
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 (:
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
Re: Opacité progressive sur certaines images
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 :
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 :
4. N'oubliez pas d'ajouter la class="fading" dans <img>, ainsi par exemple :
Voilà voilà, je mets donc le post en résolu !
Bonne soirée !
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
Sujets similaires
» Changement d'opacité progressive
» Opacité de certaines zones
» opacité images et images cliquables
» Code pour Opacité des Images.
» opacité sur les images/gifs dans un profil.
» Opacité de certaines zones
» opacité images et images cliquables
» Code pour Opacité des Images.
» opacité sur les images/gifs dans un profil.
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum