| | Effet d'opacité sur une image (messages) |  |
|
|
 Invité Invité
 | Bonsoir, alors voilà mon soucis :
J'ai mis le code CSS dans mes CSS, j'ai validé et une fois que je met le code HTML avec mon image, rien ne ce passe !
Comment cela se fait?
Amicalement, | | |
|
| | |
Ikø' 
Pika'Ghøst
~ Maîtresse des pelles ~
 Messages : 3193
| Peux-tu nous montrer ton CSS et ton code HTML? | | |
|
| | |
Invité Invité
| Bonjour, bah sois je commence a avoir des soucis de vue, sois.. je ne sais pas ! J'ai pourtant mis les même choses que dans la tuto. - Code:
-
.opacity img {
filter:alpha(opacity=50);
-moz-opacity:0.5;opacity: 0.5;
}
.opacity img:hover {
filter:alpha(opacity=100);
-moz-opacity:1;opacity: 1;
}
- Code:
-
<img class="opacity" src="http://lesforumsde.forumactif.com/users/1613/23/31/61/avatars/4989-68.jpg"> | | |
|
| | |
Basil Hawkins 
{ Membre hyper-actif }
 Messages : 2912
| Essaye ceci à la place de ton code HTML : - Code:
-
<img class="opacity" src="http://lesforumsde.forumactif.com/users/1613/23/31/61/avatars/4989-68.jpg" /> | | |
|
| | |
Invité Invité
| Bonjour  Ça ne marche pas, et il me semble que ca ne peut pas marcher ^^ Je comprend pas pourquoi le code ne s'applique pas | | |
|
| | |
Invité Invité
| Garde le même code HTML et essaye avec ceci dans le CSS : - Code:
-
.opacity {
filter:alpha(opacity=50);
-moz-opacity:0.5;opacity: 0.5;
}
.opacity:hover {
filter:alpha(opacity=100);
-moz-opacity:1;opacity: 1;
} | | |
|
| | |
Invité Invité
| Bonjour ! Ça marche, c'est génial ! Et j'aurais voulu savoir comment faire l'effet comme sur le forum New York City car je sais pas si vous comprenez, quand je passe ma souris sur l'image, ca passe d'un ton d'opacité net ! J'aurais voulu comme un dégradé si c'est possible, si c'est possible s.v.p ^^ | | |
|
| | |
Mr Pearl
{ Membre }
Messages : 31
| Juste pour signifier que sous Opera, ce code marche également ^^ | | |
|
| | |
Micka
{ Membre }
Messages : 23
| vous pouvez le faire marcher de partout... avec un code.. vais-je vous le dévoiler ? oui, car je suis gentil ^^ PA » Général » Forum » Configuration » Description du site et vous coller ce code : - Code:
-
<script type=text/javascript src=http://cadatlantis.free.fr/scripts/gradualfader.js></script> ensuite PA>Affichage>Templates>Général>overall_footer Vous enlevez ce qu'il y a et vous le remplacez par ce code: - Spoiler:
- Code:
-
<!-- BEGIN html_validation --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <table> <tr> <td> <div> <div> <table> <tbody> <tr> <td> <!-- END html_validation --> <td valign="top" width="{C3SIZE}"> <div id="{ID_RIGHT}"> <!-- BEGIN giefmod_index2 --> {giefmod_index2.MODVAR} <!-- BEGIN saut --> <div style="height: {SPACE_ROW}px"></div> <!-- END saut --> <!-- END giefmod_index2 --> </div> </td> </tr> </tbody> </table> </div> </div> <!-- close div id="page-body" --> <div id="page-footer"> <div align="center"> <div class="gen"> <strong>{ADMIN_LINK}</strong>{U_VERSION_RTL}{U_CREATE_A_FORUM}{U_VERSION} {U_SUPPORT} <!-- BEGIN switch_view_stats --> | <a name="bottom" href="/{switch_view_stats.S_STATS}" class="copyright" rel="nofollow">{switch_view_stats.L_STATS}</a> <!-- END switch_view_stats --> <!-- BEGIN switch_view_donation --> | <a name="bottom" href="/{switch_view_donation.U_DONATION}" class="copyright" rel="nofollow">{switch_view_donation.L_MAKE_DONATION}</a> <!-- END switch_view_donation --> <!-- BEGIN switch_view_contact --> | <a name="bottom" href="/{switch_view_contact.U_CONTACT}" class="copyright" rel="nofollow">{switch_view_contact.L_CONTACT}</a> <!-- END switch_view_contact --> {U_ABUSE} {U_BLOG} </div> </div> </div> {PROTECT_FOOTER} </td> </tr> </table> <script type="text/javascript"> //<![CDATA[ fa_endpage(); //]]> </script> <!-- BEGIN google_analytics_code --> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try{ var pageTracker = _gat._getTracker("{G_ANALYTICS_ID}"); pageTracker._trackPageview(); } catch(err) { } </script> <!-- END google_analytics_code --> <script type="text/javascript"> gradualFader.init() </script> </body> </html>
vous enregistrez et vous le publiez (croix verte). Ensuite, pour que ce soit opérationnel sur les images, au lieu du code habituelle, vous mettez: - Code:
-
<img src="Adresse URL de l'image" class="gradualfader"> bon pour firefox, safari et IE... ensuite je ne sais pas... | | |
|
| | |
Basil Hawkins
{ Membre hyper-actif }
Messages : 2912
| Oui sauf que ce n'est pas la même chose que le code proposé  | | |
|
| | |
Invité Invité
| Dommage, seulement sous firefox  | | |
|
| | |
Ode
{ Membre }
Messages : 183
| - Micka a écrit:
- vous pouvez le faire marcher de partout... avec un code.. vais-je vous le dévoiler ?
oui, car je suis gentil ^^
PA » Général » Forum » Configuration » Description du site
et vous coller ce code :
- Code:
-
<script type=text/javascript src=http://cadatlantis.free.fr/scripts/gradualfader.js></script>
ensuite PA>Affichage>Templates>Général>overall_footer
Vous enlevez ce qu'il y a et vous le remplacez par ce code:
- Spoiler:
- Code:
-
<!-- BEGIN html_validation --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <table> <tr> <td> <div> <div> <table> <tbody> <tr> <td> <!-- END html_validation --> <td valign="top" width="{C3SIZE}"> <div id="{ID_RIGHT}"> <!-- BEGIN giefmod_index2 --> {giefmod_index2.MODVAR} <!-- BEGIN saut --> <div style="height: {SPACE_ROW}px"></div> <!-- END saut --> <!-- END giefmod_index2 --> </div> </td> </tr> </tbody> </table> </div> </div> <!-- close div id="page-body" --> <div id="page-footer"> <div align="center"> <div class="gen"> <strong>{ADMIN_LINK}</strong>{U_VERSION_RTL}{U_CREATE_A_FORUM}{U_VERSION} {U_SUPPORT} <!-- BEGIN switch_view_stats --> | <a name="bottom" href="/{switch_view_stats.S_STATS}" class="copyright" rel="nofollow">{switch_view_stats.L_STATS}</a> <!-- END switch_view_stats --> <!-- BEGIN switch_view_donation --> | <a name="bottom" href="/{switch_view_donation.U_DONATION}" class="copyright" rel="nofollow">{switch_view_donation.L_MAKE_DONATION}</a> <!-- END switch_view_donation --> <!-- BEGIN switch_view_contact --> | <a name="bottom" href="/{switch_view_contact.U_CONTACT}" class="copyright" rel="nofollow">{switch_view_contact.L_CONTACT}</a> <!-- END switch_view_contact --> {U_ABUSE} {U_BLOG} </div> </div> </div> {PROTECT_FOOTER} </td> </tr> </table> <script type="text/javascript"> //<![CDATA[ fa_endpage(); //]]> </script> <!-- BEGIN google_analytics_code --> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try{ var pageTracker = _gat._getTracker("{G_ANALYTICS_ID}"); pageTracker._trackPageview(); } catch(err) { } </script> <!-- END google_analytics_code --> <script type="text/javascript"> gradualFader.init() </script> </body> </html>
vous enregistrez et vous le publiez (croix verte).
Ensuite, pour que ce soit opérationnel sur les images, au lieu du code habituelle, vous mettez:
- Code:
-
<img src="Adresse URL de l'image" class="gradualfader">
bon pour firefox, safari et IE... ensuite je ne sais pas... Je n'ai pas très bien compris: ce code est pour faire le même effet d'opacité que dans le tutoriel proposé, mais avec un effet "fondu" donc, de manière "progressive"? | | |
|
| | |
Micka
{ Membre }
Messages : 23
| cela fait un effet à peu près du même genre. | | |
|
| | |
Ode
{ Membre }
Messages : 183
| Aaaaah géniaaaaal! =D Merci beaucoup! =D Mais j'ai une question: dans overrall_footer, j'ai déjà modifié des choses, et je n'ai pas envie de les perdre ou de devoir recommencer. Donc, qu'est ce qu'il faut modifier précisément dans ce template? Enfin, quelles parties à remplacer par quoi, etc? | | |
|
| | |
Ode
{ Membre }
Messages : 183
| Pardon pour le double post, mais je n'ai pas de bouton "éditer". =$ J'ai trouvé la réponse à ma question seule! Pour ceux que ca interesse, il faut coller: - Code:
-
<script type="text/javascript">
gradualFader.init()
</script> juste après à la fin du template. =) Bref, pour moi le code marche de manière impeccable! =D Merci beaucoup, ca faisait longtemps que je le cherchais! =D | | |
|
| | |
Invité Invité
| Merci a toi pour cet réponsse  | | |
|
| | |
Micka
{ Membre }
Messages : 23
| Y-a pas de quoi ! On m'aide, j'aide c'est fait pour ça la vie ! Tous ceux qui on compris ça, sont grands !  | | |
|
| | |
M&P
{ Membre }
Messages : 31
| Ce serait possible d'avoir le code inverse ? Cet à dire, de passer de l'opacité à la la luminosité ? (: | | |
|
| | |
Micka
{ Membre }
Messages : 23
| à ma connaissance, non. Après, un codeur ou une personne plus expérimenté pourra te répondre | | |
|
| | |
Ikø'
Pika'Ghøst
~ Maîtresse des pelles ~
Messages : 3193
| Avec quel code, le gradual fader ou le code du tutoriel? | | |
|
| | |
M&P
{ Membre }
Messages : 31
| Eh bien je ne sais pas, mais est-ce qu'il existe un code ? | | |
|
| | |
Ikø'
Pika'Ghøst
~ Maîtresse des pelles ~
Messages : 3193
| Le code du tutoriel c'est justement ce qu'il fait: - Code:
-
.opacity img {
filter:alpha(opacity=50);
-moz-opacity:0.5;opacity: 0.5;
}
.opacity img:hover {
filter:alpha(opacity=100);
-moz-opacity:1;opacity: 1;
} L'opacité de départ est à 50%, et lorsque l'on passe la souris dessus, l'opacité devient 100% | | |
|
| | |
Invité Invité
| Si ce n'est pas ça et que tu veux dire "passez a un effet lumineu a une oppacitez" il suffit d'inverssez les codes je pensse | | |
|
| | |
Howard Wolowitz
{ Membre }
Messages : 25
| Salut ! On peut aussi embellir cet effet avec du jQuery. Il faut commencer par mettre sur chaque images où on veut qu'apparaisse cet effet une classe particulière; je vais l'appeler ici opacity. Ensuite il faut entrer ce code dans overall_header_new : - Code:
-
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.opacity').each(function() {
jQuery(this).fadeTo(0,0.5);
jQuery(this).mouseenter(function(){jQuery(this).stop();jQuery(this).fadeTo('normal',1);});
jQuery(this).mouseleave(function(){jQuery(this).stop();jQuery(this).fadeTo('normal',0.5);});
});
});
</script> Ici, comme vous pouvez le voir, j'ai choisis de faire passer l'opacité de 0.5 à 1 mais vous pouvez évidemment changer ce paramètre en remplaçant “jQuery(this).fadeTo(0,0.5);” par “jQuery(this).fadeTo(0,X);” où X est l'opacité avant de passer le curseur et “{jQuery(this).stop();jQuery(this).fadeTo('normal',0.5);});” par “{jQuery(this).stop();jQuery(this).fadeTo('normal',X);});” où X est l'opacité lorsqu'on enlève le curseur de l'élément (il est conseillé de mettre la même opacité qu'avant de passer le curseur dessus. Pour finir, si vous ne souhaitez pas appeler votre classe “opacity”, il vous suffit de remplacer “jQuery('.opacity').each(function() {” par “jQuery('.X').each(function() {” où X est le nom de votre classe. Attention, pensez à ne pas enlever le point juste avant le nom de la classe !
Voilà, si vous avez un problème n'hésitez pas ! | | |
|
| | |
Ikø'
Pika'Ghøst
~ Maîtresse des pelles ~
Messages : 3193
| Howard: Est-ce que tu as un aperçu de l'effet que ça donne? M&P: Comme dit Joris, on peut aussi passer d'un effet d'opacité à un effet de transparence, comme ça: - Code:
-
.opacity img {
filter:alpha(opacity=100);
-moz-opacity:1;opacity: 1;
}
.opacity img:hover {
filter:alpha(opacity=50);
-moz-opacity:10.5;opacity: 0.;
} | | |
|
| | |
Contenu sponsorisé
| |
| | |
| | Effet d'opacité sur une image (messages) | |
|
