Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

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
    MasculinAge : 31Message(s) : 31698

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    3/10  (3/10)
    Okhmhaka
    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


    FémininAge : 25Message(s) : 7371
    Michiyo
    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 par Eiv' Merci beaucoup ♥
    MasculinAge : 31Message(s) : 31698

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    3/10  (3/10)
    Okhmhaka
    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


    FémininAge : 27Message(s) : 202
    bisow'
    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 :)




    MasculinAge : 21Message(s) : 1690

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Pti' Biscuit
    le Mer 19 Mai 2010 - 14:46
    pas mal moi ca marche pour le texte , mais l'opaciter ne change pas ^^"




    ~ Canonnier of Calypso ~
    MasculinAge : 23Message(s) : 1971

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Lucky Numb£r
    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 !


    FémininAge : 29Message(s) : 124
    Irissia87
    le Sam 11 Fév 2012 - 16:31
    Excellent, merci pour le partage!!
    FémininAge : 17Message(s) : 208
    Khouro13
    le Sam 29 Sep 2012 - 17:02
    Merci ! (:


    Contenu sponsorisé
    Aujourd'hui à 3:28

      La date/heure actuelle est Sam 3 Déc 2016 - 3:28