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.


    Changer l'opacité d'une image (+ survol)

    Partagez
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31849

    le Mer 19 Mai 2010 - 11:42

    Yop yop^^

    Voici un code relativement simple permettant d'avoir une image à opacité réduite qui devient "normale" au survol de la souris.
    Ce code est fait pour être efficace sous tout les navigateurs.

    Commencez par mettre une "class" (sorte de marqueur permettant d'attribuer à tout les éléments comportant ce marqueur un effet CSS) à votre image en l'affichant. Pour cela affichez-la normalement :

    Code:
    <img src="lienimage.jpg" alt="texte alternatif de l'image" title="texte de l'image" />

    Rappel :
    le "alt" : est le texte qui s'affiche en cas de problème d'hébergeur si l'image, elle, ne s'affiche pas.
    le "title" : est le texte qui s'affiche dans un cadre jaune si vous laissez votre souris sur l'image.
    Tant que possible, essayez toujours d'avoir les deux dans votre image, surtout le "alt", afin d'être conforme avec les normes du codage.


    Ajoutez dans votre code d'image le fameux marqueur en mettant une "class" :

    Code:
    <img src="lienimage.jpg" alt="texte alternatif de l'image" title="texte de l'image" class="exemple" />

    Vous ne verrez aucun changement, c'est normal, il faut attribuer les valeurs voulues dans le code CSS. Le code suivant est donc à mettre dans "Panneau d'admin > Affichage > Couleurs > Feuille CSS".

    Code:
    .exemple
    {
    opacity: 0.5;
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    filter: alpha(opacity=50);
    }

    .exemple:hover
    {
    opacity: 1;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    filter: alpha(opacity=100);
    }

    La première partie du code s'applique sur l'image directement, elle baisse l'opacité de moitié. Vous pouvez bien entendu adapter ces valeurs en mettant à la place de 0.5 > 0.2 (opacité plus basse encore) ou bien 0.7 (opacité plus haute). Attention car pour la dernière donnée c'est sur 100^^
    La seconde partie s'applique à l'image lorsqu'elle est survolée. J'ai donc remis la valeur maximale pour que l'opacité soit "normale".

    Attention : si vous voulez changer le mot "exemple" par celui e votre choix, il faut le changer à la fois dans la "class" de l'image ET dans les deux parties du CSS !


    Remarque : l'image en exemple ne comporte pas de lien, c'est une image simple, pour mettre un lien, il vous suffit d'ajouter de part et d'autre de l'adresse de l'image le code de lien normal :

    Code:
    <a href="adresse"><img src="lienimage.jpg" alt="texte alternatif de l'image" title="texte de l'image" class="exemple" /></a>


    Dernière édition par Sparrow-style le Mer 13 Juin 2012 - 23:31, édité 1 fois



    avatar
    Michiyo
    FémininAge : 25Messages : 7466

    le Mer 19 Mai 2010 - 12:40

    Hum... ça peut-être intéressant à essayer ça... mais... tu aurais un exemple "appliqué" à montrer pour voir ce que ça donne vraiment?
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31849

    le Mer 19 Mai 2010 - 13:05

    L'exemple appliqué il est difficile à mettre dans un message Razz Mais je pense peut-être faire une sorte de forum vitrine avec tout les effets expliqués dans les Trucs et Astuces en exemple... A voir Razz



    avatar
    bisow'
    FémininAge : 27Messages : 202

    le Mer 19 Mai 2010 - 13:13

    merciiiii !
    en effet ça serait sympa d'avoir un forum "vitrine" pour voir l'application de ce genre d'effets :)





    avatar
    Pti' Biscuit
    MasculinAge : 21Messages : 1690

    le Mer 19 Mai 2010 - 14:46

    pas mal moi ca marche pour le texte , mais l'opaciter ne change pas ^^"





    ~ Canonnier of Calypso ~
    avatar
    Lucky Numb£r
    MasculinAge : 24Messages : 1972

    le Mer 19 Mai 2010 - 18:20

    Merci du partage ! Effectivement l'effet appliqué est assez compliqué à avoir dans un message sans modifier le CSS du forum (voir impossible). Pourtant je suis certains qu'en vous trouvant un forum utilisant le principe vous direz tous "aahhh c'est ça !!". ^^
    P.S ~ J'ai parlé au masculin uniquement parce que je généralise hein !



    avatar
    Irissia87
    FémininAge : 29Messages : 124

    le Sam 11 Fév 2012 - 16:31

    Excellent, merci pour le partage!!
    avatar
    Khouro13
    FémininAge : 18Messages : 208

    le Sam 29 Sep 2012 - 17:02

    Merci ! (:



    Contenu sponsorisé


      La date/heure actuelle est Ven 24 Mar 2017 - 14:57