Partage
  • Partager sur Facebook
  • Partager sur Twitter

Afficher un texte via un bouton et le masquer.

Sujet résolu
    16 juin 2017 à 9:51:20

    Bonjour ! Bonsoir !

    Je fais appel à vous car j'ai besoin d'aide ! :o

    J'ai découvert le HTML et CSS en lisant les cours dessus sur ce site, et actuellement je suis en train de refaire une page.

    Mais j'ai un soucis !  Je veux faire un site test pour un magasin de vêtements, et donc sur une partie de la page, il y a plusieurs images avec un titre en bas et il y a une image en forme de + à côté du titre de chaque image

    Et je veux que quand je clique sur le +, il y a une description qui s'affiche sur l'image, et que je masque cette description tout en cliquant sur un autre + (ou en cliquant autre part sur la page aussi) Je vous montre ce que je veux.

    J'espère que vous me comprenez, ce que je veux, c'est que le + qu'on voit à droite de l'image donnée, devient un bouton qui affiche la description sur l'image auquel il est situé (description exemple à gauche de l'image donnée.) Et lorsque que j'ai cliqué sur un des boutons pour afficher une description, il disparait et donc pour cacher la description affichée, je dois cliquer autre part sur la page. De plus, je ne veux pas que plusieurs description peuvent s'afficher, mais une seule à la fois. 

    (J'espère avoir été clair ma demande, désolé si je peux paraître bête ou incompréhensible, je suis novice, je découvre le HTML CSS, et je vais bientôt commencer à apprendre le JavaScript.)

    Merci de m'aider ! :D

    PS:Rappel : Les + qui doivent être des boutons sont à la base des images, pas le symbole + du clavier.

    -
    Edité par DrLegend / Mathis 16 juin 2017 à 9:54:20

    • Partager sur Facebook
    • Partager sur Twitter

    Cordialement, votre humble serviteur, Mathis.

      16 juin 2017 à 10:49:50

      Salut, ta demande est compréhensible ne t'inquiète pas tout est clair. Cependant, pour réaliser ce que tu demandes çà sera avec du JavaScript que tu vas pouvoir réaliser ça. Et si tu veux le réaliser de façons plus simple tu peux utiliser Jquery (framework JavaScprit).

      Cordialement Thomas.

      • Partager sur Facebook
      • Partager sur Twitter
        16 juin 2017 à 10:58:28

        Hello,

        quelques pistes pour l'apparition de la légende avec effets sympas :

        https://www.w3schools.com/howto/howto_css_image_overlay.asp

        https://codepen.io/nxworld/pen/ZYNOBZ

        https://www.webdesignerdepot.com/2015/02/3-cool-css3-image-hover-effects/

        http://imagehover.io/

        Recherche dans un moteur de recherche : hover effect picture css

        Tout ça sans Javascript, juste CSS3

        -
        Edité par ChrisLebure 16 juin 2017 à 10:59:08

        • Partager sur Facebook
        • Partager sur Twitter
          16 juin 2017 à 11:17:05

          Tom Martin a écrit:

          Salut, ta demande est compréhensible ne t'inquiète pas tout est clair. Cependant, pour réaliser ce que tu demandes çà sera avec du JavaScript que tu vas pouvoir réaliser ça. Et si tu veux le réaliser de façons plus simple tu peux utiliser Jquery (framework JavaScprit).

          Cordialement Thomas.

          Je me suis justement renseigné, j'ai bien vu que je pouvais utilser JavaScript ou JQuery, mais je ne sais point me servir de ces 2 langages.. :o

          ChrisLebure a écrit:

          Hello,

          quelques pistes pour l'apparition de la légende avec effets sympas :

          https://www.w3schools.com/howto/howto_css_image_overlay.asp

          https://codepen.io/nxworld/pen/ZYNOBZ

          https://www.webdesignerdepot.com/2015/02/3-cool-css3-image-hover-effects/

          http://imagehover.io/

          Recherche dans un moteur de recherche : hover effect picture css

          Tout ça sans Javascript, juste CSS3

          -
          Edité par ChrisLebure il y a 5 minutes

          Woaw ! Merci pour ces liens, ça va beaucoup m'aider ! 

          je teste ça tout de suite, et je dis si ça à fonctionner.

          EDIT : Cela a résolu mon problème ! Toutes mes remerciements !



          -
          Edité par DrLegend / Mathis 16 juin 2017 à 15:14:54

          • Partager sur Facebook
          • Partager sur Twitter

          Cordialement, votre humble serviteur, Mathis.

          Afficher un texte via un bouton et le masquer.

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
          • Editeur
          • Markdown