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.


    [Tuto] Faire apparaître un texte au survol d'une image.

    Partagez
    avatar
    Kanala
    FémininAge : 29Messages : 34

    le Mer 3 Mai 2017 - 14:59

    Bonjour à tous !

    Alors je vous propose aujourd’hui un code personnalisable qui vous permet de faire apparaître un texte sur une image au survol de la souris. Vous allez voir, ce n’est pas très difficile, mais soyez quand même attentif et lisez bien tout pour ne pas louper une étape. A noter que je ne vous donne pas le code tout prêt. Ce sera à vous de le constituer !
    Si vous avez des problèmes, n’hésitez à la poser dans le forum Problème avec mon code ou des questions par mp, comme ça je pourrais les ajouter à ce post et ça pourra surement aider d’autres personnes. N’oubliez pas, aucune question n’est stupide !

    Alors en premier lieu, il vous faut une image. Pour mon cas, je vais utiliser celle-ci
    Spoiler:
    Peu importe la taille, nous la définirons dans le code ! Elle peut être plus grande ou plus petite. La première chose que nous allons faire, c’est noter dans un coin sa taille justement. Pour mon image ce sera donc : 500px de largeur et 500px de hauteur.

    Nous allons donc créer une div, qui va nous permette de faire l’effet que nous recherchons. A noter que c’est dans cette div que vous mettrez tous les codes. Il vous faut lui donner un nom. Moi je vais l’appeler Cache_Texte. Donc dans mon css je vais avoir

    Code:
    .Cache_Texte{

    }

    On oublie pas le point du début ! Et c’est entre les accolades que nous allons mettre le contenu de notre code.

    Nous allons commencer par mettre la taille de notre division, cette division qui contiendra notre texte. Pour ça on utilise le code de la larguer et de la hauteur (dans cet ordre là !)
    Code:
    .Cache_Texte{
    width : LARGEURpx;
    height : HAUTEURpx;
    }
    On fait attention à garder les points virgules qui terminent la ligne de code !

    Ensuite, je vais déterminer si mon texte sera plus haut ou moins haut que mon image, afin de savoir si je dois insérer un code pour faire apparaître une scrollbarr. Ce code sera le suivant, en langage css. Si vous n’êtes pas administrateur sur le forum, faites appel à du css via les balises appropriées (voir plus bas, je vous les donne Wink )
    Code:
     overflow: auto;

    Donc si je résume pour l’instant : mon texte sera dans une div faisant 500 de largeur et 500 de hauteur. Si mon texte est plus grand un scrollbarr apparaîtra de manière automatique.


    Maintenant nous allons ajouter le code pour faire une transition, histoire que cela soit plus jolie. On va utiliser pour cela transition-duration. Pour ma part, je vais mettre 0.8 secondes. Si vous voulez que ce soit plus long, augmentez le timing. Si vous voulez que ce soit plus rapide, et bien, vous diminuez tout simplement. Le code est
    Code:
     transition-duration:.Zs;
    (remplacez Z par la valeur que vous désirez)
    Ce code n'étant pas toujours pris en compte par les anciens navigateurs, on va rajouter un préfixe pour qu’il le soit. Je vous renvoie au tutoriel Savoir quand utiliser des préfixes CSS fait par Manumanu.

    Enfin, et bien il nous reste qu’à rendre notre texte invisible au premier abord. Pour cela on va utiliser le code opacity.
    Code:
     opacity : 0;

    0, car on ne veut pas que le texte se voit au début. Et, comme précédemment, on rajoute des préfixes pour être sûr que tous les navigateurs le prennent en charge. Attention, pour internet explorer, il faut utiliser la propriété suivante
    Code:
    filter : alpha(opacity=0); 

    Donc au final, si je résume : mon texte sera dans une div faisant 500 de largeur et 500 de hauteur. Si mon texte est plus grand un scrollbarr apparaîtra de manière automatique. J’ai mis une transition pour que cela soit plus jolie, et enfin j’ai caché mon texte comme ça, il ne se verra pas.


    Ensuite, et bien, cela dépend de vous. Si vous voulez qu’il y ait un fond de couleur, vous ajoutez le code nécessaire. Si vous voulez une couleur de texte spécifique, c’est pareil. C’est un code css, il est donc personnalisable :)

    Nous avons donc fini la première partie du code. Maintenant, on va coder notre div pour, qu’au passage de la souris, notre div (texte) apparaisse. Nous allons nous servir pour cela du « hover » ce qui signifie en code le survol. On reprend le nom de notre div et on rajoute un deux-points suivi de hover. Donc pour ma part :
    Code:
    .Cache_Texte :hover{

    }

    ATTENTION on garde le précédent code fait ! Celui-ci est un nouveau ! Donc nous avons


    Code:
     .Cache_Texte{

    }

    .Cache_Texte :hover{

    }

    Le premier est rempli par les atrtibuts vu plus haut. Et le second, nous allons le remplir avec un seul attribut, donné ci-dessous.

    Ce qu’on va ajouter au hover, c’est pour permettre de changer l’opacité. On reprend le code donné plus haut mais à la place de mettre 0, on mets un 1. Si vous voulez que l’image reste un peu en fond, vous pouvez, à la place de mettre 1, mettre 0.8 par exemple. Pour le filter, on est 100 pour 1 et 80 par exemple pour 0.8. Il est calculé en pourcentage.


    Et voilà, la partie css est terminée. Maintenant nous allons voir le code html. C’est assez simple. On va d’abord mettre l’image en fond via le code background-image auquel on va attribuer la taille de l’image qu’on a noté plus haut.

    Code:
     <div style="background-image:url(URL DE L IMAGE ICI);    width:LARGEURpx; height:HAUTEURpx;">

    </div>
    On prend l’habitude de fermer un code html dès qu’on l’a ouvert. J’ai ouvert la div, je la ferme dans mon code.

    Pour ma part, avec mon image, cela donne du coup
    Code:
     <div style="background-image:url(http://img15.hostingpics.net/pics/798434AlexPe.png);    width:500px; height:500px;">

    </div>

    Et maintenant on rajoute la div que nous avons créé en css, que l’on vient incorporer dans celle que nous venons de coder. Pour ma part, cela donne du coup
    Code:
     <div style="background-image:url(URL DE L’IMAGE ICI);    width:LARGEURpx; height:HAUTEURpx;"> <div class="NOM DE LA DIV QUE VOUS AVEZ CREE">  texte ici blablabla
    </div></div>

    Et comme promis, le code pour exporter un css quand nous n’avons pas assez au panneau d’admin c’est
    Code:
     <style>

    </style>

    A noter que les lignes de codes doivent être sur une même ligne. On enlève les sauts de lignes en gros.



    Et voilà vous savez tout. Et pour ma part, en personnalisant les balises css, cela me donne :



    Ezeÿel Sköell

    Loup de la meute

    Petit-fils de l’ancien ulfric

    Autre texte ici blablabla



    A noter que le background color ne fonctionne pas si on l'ajoute dans les balises < style >. Si vous voulez en ajouter un, il suffit de l'ajouter en style sur la div.


    Par exemple, pour moi cela donne :
    Code:
    <div class="Cache_Texte" style="background-color:#000000;">  </div>


    Et voilà, vous savez tout. A vous de tenter et d'essayer

    PS : pensez à changer le nom de la div si vous voulez le faire à la suite, sinon cela court-circuitera mon propre code Wink


    Dernière édition par Kanala le Jeu 4 Mai 2017 - 11:21, édité 2 fois



    avatar
    AlphaCoreLatios
    MasculinAge : 23Messages : 31

    le Mer 3 Mai 2017 - 22:57

    Bonjour, il manque un "e" à "d'un" pour faire "d'une"dans le titre.

    C'était l'intervention du jour Cool .

    Merci pour ce petit tuto ! Je le garde au chaud quand l'occas se présentera :p.



    avatar
    Kanala
    FémininAge : 29Messages : 34

    le Jeu 4 Mai 2017 - 10:35

    OMG x'D J'avais pas vu merci ! Very Happy



    avatar
    kaguya venusity
    FémininAge : 23Messages : 97

    le Jeu 4 Mai 2017 - 12:15

    Merci beaucoup Wink
    avatar
    kaguya venusity
    FémininAge : 23Messages : 97

    le Jeu 4 Mai 2017 - 22:09

    mais jai de la misaire ak le code pouvez vous me donner une example avec mon code svp
    avatar
    Nihil Scar Winspeare
    Messages : 5038

    le Jeu 4 Mai 2017 - 22:47

    Merci pour ton partage Kanala !
    Ces temps ci on travaille un peu au ralenti, mais on a bien vu ton tuto et on lira et validera :hug:

    > kaguya :)

    Si tu as des difficultés, tu peux poster dans Problème avec mon code, en mettant le lien du tuto, ton code et un lien d'un endroit où on peut voir le code qui bug :)



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    avatar
    kaguya venusity
    FémininAge : 23Messages : 97

    le Jeu 4 Mai 2017 - 22:52

    Jai réussi merci bcp Wink je l'aime bcp le code *.*
    avatar
    benficagirl
    FémininAge : 32Messages : 383

    le Sam 25 Nov 2017 - 11:01

    merci :).
    avatar
    fraumali
    FémininAge : 38Messages : 121

    le Mar 13 Mar 2018 - 14:44

    Bonjour. Merci pour ce tuto
    Contenu sponsorisé


      La date/heure actuelle est Mer 24 Oct 2018 - 5:03