AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Image qui s'éclaircit / s'illumine au passage de la souris

    Partagez
    Ayael
    FémininAge : 21Messages : 550

    le Dim 25 Déc 2011 - 18:27

    Exemple (ne faites pas attention au reste)

    Il ne me semble pas avoir vu de tutoriel pour faire ça donc j'en propose un :
    En fait c'est très simple il suffit de faire une class à l'image qui vous intéresse, puis mettre ce code dans le CSS (affichage → couleur → Feuille de style CSS)

    Code:

    /* Opacité images */
               
     .opac {
        opacity: 0.5;
    /* formule firefox */
        filter: alpha(opacity=50);
        transition: opacity 1s;
        -moz-transition: opacity 1s;
        -o-transition: opacity 1s;
        -webkit-transition: opacity 1s;
        -htm-transition: opacity 1s;
                }
           
      .opac:hover {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transition: opacity 1s;
        -moz-transition: opacity 1s;
        -o-transition: opacity 1s;
        -webkit-transition: opacity 1s;
        -htm-transition: opacity 1s;     
                        } 
    /* Fin opacité image */


    Et le html qui peut se mettre partout!
    Code:
     <img src="lien de l'image" class="opac"/>

    Il est important de garder la cellule de tableau pour que la luminosité se baisse dès qu'on quitte la souris! Si vous avez des questions où que vous voulez régler l'opacité n'hésitez pas à me demander! ♥


    Dernière édition par Shay Altanir le Dim 25 Déc 2011 - 20:04, édité 1 fois

    Taktiik
    MasculinAge : 22Messages : 2291

    le Dim 25 Déc 2011 - 19:17

    Yop !

    Pourquoi ne pas attribuer le class à l'image directement ?
    Ca permettrait de supprimer le table et la div et donc d'alléger le code ^^
    J'ai pas tester mais je pense que ça marcherait.

    Cordialement~~
    Taktiik.

    Ayael
    FémininAge : 21Messages : 550

    le Dim 25 Déc 2011 - 20:03

    Eh bien il se trouve que non^^" J'y ai pensé aussi évidement, mais il semblerait que ça ne marche pas! Après c'est vrai que le code serait plus léger, donc je vais réessayer voir si y'a pas un truc qui coince!

    Edit : trouvééé en fait l'erreur venait d'une guillemet réfractaire U.U ! Je poste dessuite la version simplifié!
    Merci à toi ♥

    Taktiik
    MasculinAge : 22Messages : 2291

    le Dim 25 Déc 2011 - 20:07

    Yop !

    Pas de quoi :3
    Toujours là pour aider ;D
    Très bon tuto en tout cas :)

    Merci~~
    Taktiik.

    Titou02880
    MasculinAge : 21Messages : 24

    le Mer 11 Jan 2012 - 23:34

    Bonsoir,

    J'ai copié le code dans "(affichage → couleur → Feuille de style CSS) "

    Mais que faut-il faire après ? Rolling Eyes

    Je ne vois pas ce que vous voulez dire par "faire une class à l'image"


    Merci.
    Holliday
    FémininAge : 18Messages : 32

    le Jeu 26 Jan 2012 - 17:03

    +1, de même Wink



    Streetwalker
    FémininAge : 23Messages : 46

    le Jeu 9 Fév 2012 - 12:27

    De même



    L'enfant Michael Jackson n'a jamais pu exister, le chanteur des Jacksons 5 l'a étouffé à la naissance.
    Ayael
    FémininAge : 21Messages : 550

    le Sam 25 Fév 2012 - 14:40

    Ah désolée, je n'avais pas vu, faire une class c'est le truc class=opac, il est directement donné : il est dans le code avez vous bien coller ceci dans votre html :
    Code:
    <img src="lien de l'image" class="opac"/>
    En plus du CSS?

    Huski
    FémininAge : 20Messages : 7

    le Sam 17 Mar 2012 - 21:38

    Je ne vois pas où le plasser dans ce code là. Quelqu'un peu m'aider svp ?
    Code:
    <a href= "http://ulrikmunther.forumgratuit.org/u1"
    class="postlink"><img style="border:2px white solid;" alt="Huski" src="http://i48.servimg.com/u/f48/15/78/19/21/admin_10.jpg" /></a>

    Merci :)



    Ayael
    FémininAge : 21Messages : 550

    le Dim 18 Mar 2012 - 9:20

    N'importe où, à l'endroit ou tu veux que ton image soit en fait ^^ Sur la page d'accueil dans un sujet...

    Huski
    FémininAge : 20Messages : 7

    le Dim 18 Mar 2012 - 11:36

    Je sais, mais quand je le fais après, sa beug, l'image disparait, j'ai des codes à la place (qui, eux bizarement s'illuminent au passage de la souris) . J'ai essayée pleins d'emplacement et ça ne marche pas :/



    Ayael
    FémininAge : 21Messages : 550

    le Dim 18 Mar 2012 - 13:59

    le html est activé sur ton forum? Puis je avoir un lien de l'endroit ou tu veux le mettre car c'est assez bizarre!

    D'ailleurs ton code est incorecte, je ne vois pas la class de l'enluminement

    Huski
    FémininAge : 20Messages : 7

    le Dim 18 Mar 2012 - 15:38

    Voici mon forum, je dois le mettre sur la page d'accueil au niveau du staff :CLIC ICI

    Ensuite, voici le code complet de la page d'accueil :
    Code:
    <center><div style="background-color: #A8A7E8;border-left:3px #0B2C66solid;width:900px;"> <div style="font-size:35pt; font-family: 'Charlemagne Std', Courier, monospace; text-align:center;color: #0B2C66;border-bottom:1px #0B2C66solid;margin-left:30px;margin-right:24px;">BIENVENUE SUR UMFF !</div><br/><div style="display:inline-block;width:300px;height:210px;"><div style="font-family:Arial, Helvetica, sans-serif;font-weight:bold;font-size:12px;color#0B2C66; "><a style="text-decoration:none !important;color:#0B2C66; text-transform:uppercase"href=" http://ulrikmunther.forumgratuit.org/t1-reglement-obligatoire-internationellt-tvingande-regler "> Règlement</a> - <a style="text-decoration:none !important;color: #0B2C66; text-transform:uppercase;" href="http://ulrikmunther.forumgratuit.org/t5-ulrik-munther">Ulrik</a> - <a style="text-decoration:none !important;color: #0B2C66; text-transform:uppercase;" href="http://ulrikmunther.forumgratuit.org/f3-presentations-presentationer">Présentations</a><br/><a style="text-decoration:none !important;color:#0B2C66; text-transform:uppercase;" href="http://ulrikmunther.forumgratuit.org/f7-vos-messages-pour-ulrik-dina-meddelanden-for-ulrik">Messages pour Ulrik</a> - <a style="text-decoration:none !important;color: #0B2C66; text-transform:uppercase;" href="http://ulrikmunther.forumgratuit.org/f5-actus-nyheter">Actus</a><br/> <a style="text-decoration:none !important;color: #0B2C66; text-transform:uppercase;" href="http://ulrikmunther.forumgratuit.org/f22-questions">Questions</a></div><br/><object type="application/x-shockwave-flash" data="http://www.archive-host.com/dewplayer-vol.swf?mp3=http://www.archive-host.com/files/1501153/77a382c74a1facf1d58e33dbae7d41a130c01f4d/Melodifestivalen_2012_Ulrik_Munther_-_Soldiers.mp3&autostart=0&autoreplay=1&showtime=1&volume=50" width="240" height="20"><param name="movie" value="http://www.archive-host.com/dewplayer-vol.swf?mp3=http://www.archive-host.com/files/1501153/77a382c74a1facf1d58e33dbae7d41a130c01f4d/Melodifestivalen_2012_Ulrik_Munther_-_Soldiers.mp3&autostart=0&autoreplay=1&showtime=1&volume=50" /></object><p><div style="font-family:Arial, Helvetica, sans-serif;color:#0B2C66;font-weight:bold;text-transform:uppercase;">Partenaires<blockquote><marquee style="text-align:justify;font-size:10px;margin-bottom:10px;padding:4px;background-color:#91A0BA;border:1px #0B2C66 solid;border-left:4px #0B2C66 solid;-moz-border-radius:5px;" height="70px><span style="font-weight:bold; font-size:12px;"><div style="margin:auto;text-align:center;width:100%"><p><a href="http://cerewin.e-monsite.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://i43.servimg.com/u/f43/17/33/70/30/la_pro10.jpg" border="0" alt="" /></a></div></marquee></span></div></div><div style="display:inline-block;width:290px;border-left:5px #0B2C66 dotted;height:210px;"><div style="color: #0B2C66;font-family:Arial, Helvetica, sans-serif;font-weight:bold; text-transform:uppercase;">Le STAFF<br/><a href= "http://ulrikmunther.forumgratuit.org/u1"
    class="postlink"><img style="border:2px white solid;" alt="Huski" src="http://i48.servimg.com/u/f48/15/78/19/21/admin_10.jpg" /></a>
     <a href="http://ulrikmunther.forumgratuit.org/u2"><img style="border:2px white solid;" alt="Huski" src=" http://i48.servimg.com/u/f48/15/78/19/21/98them10.jpg" /></a> <a href="http://ulrikmunther.forumgratuit.org/u4" class="postlink"><img style="border:2px white solid;" alt="Huski" src=" http://i43.servimg.com/u/f43/17/33/70/30/4-71110.jpg" /></a> <img style="border:2px white solid;" alt="Huski" src=" http://i48.servimg.com/u/f48/15/78/19/21/um510.jpg" /></a> <img style="border:2px white solid;" alt="Huski" src=" http://i48.servimg.com/u/f48/15/78/19/21/um510.jpg" /></a></div><p><div style="color:#0B2C66;font-family:Arial, Helvetica, sans-serif;font-weight:bold; text-transform:uppercase;">LES TOPS<br/><a href=" url"><img src=" http://i48.servimg.com/u/f48/15/78/19/21/resize10.jpg"/></a></a>
    <a href="url" class="postlink" target="_blank" rel="nofollow"><img src=" http://i48.servimg.com/u/f48/15/78/19/21/resize10.jpg " border="0" alt="" /></a>
    <a href="url" class="postlink" target="_blank" rel="nofollow"><img src=" http://i48.servimg.com/u/f48/15/78/19/21/resize10.jpg " border="0" alt=""/></a></div></div><br/><p><div style="font-family:Arial, Helvetica, sans-serif;font-weight:bold;color: #0B2C66;margin-top:5px;">NEW & ACTUS<blockquote style="font-size:10px;text-align:justify;overflow:auto;height:130px;margin-top:2px;padding:2px;background-color:#91A0BA;border:1px #0B2C66 solid;border-left:4px #0B2C66 solid;-moz-border-radius:5px;"><center><font face="Times New Roman"><p> <span style="font-size: 18px; line-height: normal"> <font color="red"> ► <u>UMFF vous ouvre officiellement ses portes !</u> ◄ </font></span><p><span style="font-size: 14px; line-height: normal">Bienvenue sur l'unique forum dédié à <i>Ulrik Munther</i>, le chanteur suédois. Si vous vous demandez ce que signifie "UMFF", voici votre réponse : "Ulrik Munther Forum Français". <p>Comme vous pourez le voir, il n'est pas que Français. Nous avons aussi pris soins de faire les traductions Suédoise en spoiler. Nous accueillons tout le monde sur ce forum, grands, petits, filles, garçons, Français, Suédois, Anglais... <p>Nous espérons que nos très chers membres seront tenir la bonne embiance existente.<p> <font color="red">N'oubliez pas de bien lire le règlement ainsi que de faire votre présentation.</font><p> Sans quoi, vous ne serez pas accepté sur le forum,ce qui serait domage. <p>En cas de problème, si vous n'arrivez pas à vous inscrire ou quoi que soit, n'hésitez pas à laisser un message dans "<a href="http://ulrikmunther.forumgratuit.org/f12-pub-et-entraide-pub-och-omsesidigt?tid=83ccd110b4ce3859f9ba09f0e94847d6" class="postlink">Pub et entraide</a>" pour signaler votre problème.</span><p>*****<p><span style="font-size: 18px; line-height: normal"> <font color="black"> ► <u>Aidez le STAFF !</u> ◄</font></font><p><span style="font-size: 14px; line-height: normal">Chers membres, nous vous confions une mission de haute voltige ! Et oui, tout Admin et Modos que nous sommes, nous ne sommes pas (totalement) des génies en langues ! Si vous remarquez des fautes dans les traductions Suédoises, n'hésitez pas à nous en faire part ! Grâce à vous, nos amis Suédois réussiront peut-être à comprendre ce que nous, pauvres petits Français que nous sommes, avons voulue leurs dire !<p>Encore Merci pour votre implication ! <img src="http://bidinet.free.fr/tuto%20anim/smiley.png" border="0" alt="" /><p>*****<p> <span style="font-size: 18px; line-height: normal"><font color="black">► <u>La Chanson du Mois</u> ◄ </font></font><span style="font-size: 14px; line-height: normal"><p><i>La chanson du  moi est une chanson d'Ulrik (ou en rapport avec Ulrik) qui dure un mois complet voir plusieurs mois en fonction de la popularité et des demandes. Elle se trouve sur la page d'accueil entre les liens de navigations rapides et les partenaires.</i><p>Ce mois ci c'est "Soldiers" qui est mise à l'honneur en raison de la participation d'Ulrik au "Melodifestivalen" où il l'a interprété. "Soldiers" signifie "Soldat" en Français. Vous pouvez retrouver toutes les paroles de la chanson ainsi que la vidéo en cliquant <a href="http://ulrikmunther.forumgratuit.org/t18-soldiers-melodifestivalen-2012?tid=34491c4644f710c7f9ba09f0e94847d6" class="postlink">ICI</a>.<p>*****<p><span style="font-size: 18px; line-height: normal"><font color="black">► <u>Le Blog</u> ◄</font></font><p><span style="font-size: 14px; line-height: normal">Un blog pour le forum vient d'être créé, venez le retrouver <a href="http://umff.tumblr.com/" class="postlink">ICI</a></font> <p>*****<p><span style="font-size: 18px; line-height: normal"><font color="black">► <u>Autres</u> ◄</font></font><p><span style="font-size: 14px; line-height: normal">Il se peu parfois (même très souvent) que le fond d'écran bouge en fonction de la taille de votre écran. Pour avoir la bonne taille, pour les macs : Maintenez enfoncé la pomme et faites bouger la roulette de votre souris. Pour les PC, restez appuyé sur Ctrl et faites bouger la roulette de votre souris.<p>*****<p>Il nous manque 2 Modérateurs, de préférence callé en graphisme, html et CSS, sachant parler au moins quelques mots de Suédois (Pour les Français) ou sachant parler au moins quelques mots de Français (pour les Suédois) et ayant la possibilité de venir au minimum 10 mins tout les jours pour surveiller le fow. Si intéréssé, veuillez envoyer vos candidatures à <a href="http://ulrikmunther.forumgratuit.org/u1?tid=34491c4644f710c7f9ba09f0e94847d6" class="postlink">Huski</a>.</font></font> </span></font></center></blockquote></div><br/><span style="float:right; text-transform:lowercase; font-size:8px; color: #0B2C66;font-family:Arial, Helvetica, sans-serif;"><font color="black"><strong>le code page d'accueil � été créé par CREATIC, il est disponible sur http://centralreview.tk</strong></font></span></div></center>

    et voici juste la partie staff :
    Code:
    ><div style="display:inline-block;width:290px;border-left:5px #0B2C66 dotted;height:210px;"><div style="color: #0B2C66;font-family:Arial, Helvetica, sans-serif;font-weight:bold; text-transform:uppercase;">Le STAFF<br/><a href= "http://ulrikmunther.forumgratuit.org/u1"
    class="postlink"><img style="border:2px white solid;" alt="Huski" src="http://i48.servimg.com/u/f48/15/78/19/21/admin_10.jpg" /></a>
     <a href="http://ulrikmunther.forumgratuit.org/u2"><img style="border:2px white solid;" alt="Huski" src=" http://i48.servimg.com/u/f48/15/78/19/21/98them10.jpg" /></a> <a href="http://ulrikmunther.forumgratuit.org/u4" class="postlink"><img style="border:2px white solid;" alt="Huski" src=" http://i43.servimg.com/u/f43/17/33/70/30/4-71110.jpg" /></a> <img style="border:2px white solid;" alt="Huski" src=" http://i48.servimg.com/u/f48/15/78/19/21/um510.jpg" /></a> <img style="border:2px white solid;" alt="Huski" src=" http://i48.servimg.com/u/f48/15/78/19/21/um510.jpg" /></a></div>
    Ayael
    FémininAge : 21Messages : 550

    le Dim 18 Mar 2012 - 17:04

    il faut que derrière le lien de toutes les images tu rajoutes :
    Code:
    class="opac"
    ^^

    Ex :

    Code:
    <a href="http://ulrikmunther.forumgratuit.org/u2"><img style="border:2px white solid;" alt="Huski" src=" http://i48.servimg.com/u/f48/15/78/19/21/98them10.jpg" class="opac" /></a>

    ^^

    Huski
    FémininAge : 20Messages : 7

    le Dim 18 Mar 2012 - 17:20

    Ah ! Merci beaucoup ! ça marche enfin !
    Encore merci :)



    Ayael
    FémininAge : 21Messages : 550

    le Dim 18 Mar 2012 - 18:03

    Pas de quoi ♥

    Kisuke.U
    MasculinAge : 19Messages : 66

    le Dim 25 Mar 2012 - 20:58

    Moi j'ai ce code :

    Code:
    <img src="http://img11.hostingpics.net/pics/810344regle.png" class="illu"/>

    Je sais pas ou placer ton code tout en gardant le "class="illu" Aurais-tu une idée :) ?



    Patdrue
    FémininAge : 26Messages : 143

    le Lun 10 Oct 2016 - 21:08

    Pile l'astuce que je cherchais! Merci infiniment!!!
    Kelalin
    FémininAge : 24Messages : 1403

    le Mar 11 Oct 2016 - 14:41

    Merci pour le partage !
    Contenu sponsorisé

    Aujourd'hui à 16:30


      La date/heure actuelle est Lun 5 Déc 2016 - 16:30