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 ou d'un bloc (+ survol)

    Partagez
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Mer 19 Mai 2010 - 11:42


    Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
    Lien pour comprendre pourquoi le contenu n'est pas sous hide


    Yop yop^^

    Voici un code relativement simple permettant d'avoir une image à opacité réduite qui devient "normale" au survol de la souris.

    Exemple :
    texte alternatif de l'image



    Ce code est fait pour être efficace sous tout les navigateurs.
    De plus, bien que je vous montrerai comment faire pour une image, vous pouvez faire la même chose pour tous les types de balises, que ce soit des bloc (div), des paragraphes (p), du texte simple (span), etc.



    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;
    }

    .exemple:hover {
    opacity: 1;
    }

    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).
    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>


    Ajout Responsable (Onyx) :

    Si vous voulez que le changement d'opacité se fasse progressivement (en transition), il suffit de modifier votre CSS comme cela, soit de rajouter la transition :
    Code:
    .exemple {
    opacity: 0.5;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    }

    .exemple:hover {
    opacity: 1;
    }

    Le "transition" sert à indiquer que l'effet se déroulera en 0.5 seconde. Vous pouvez mettre le délai que vous souhaitez, de 0s (instantanné) à n'importe quel autre chiffe (même 1000 secondes si vous voulez).


    Voilà c'est tout !


    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 : 31851

    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 : 22Messages : 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 Lun 24 Juil 2017 - 16:29