Partage
  • Partager sur Facebook
  • Partager sur Twitter

div cacher/visible html/css

visionneur d'images comme Facebook

Sujet résolu
    29 août 2012 à 16:31:00

    Hi everybody!
    Je suis en train de finir la création d'un site internet en HTML/CSS.
    Je me suis demander est-ce que c'est possible de créer un interface comme le visionneur d'images de Facebook en HTML/CSS (sauf que ici ce ne seras une image mais du texte.)
    Concrètement: est ce qu'il est possible en HTML/CSS de faire en sorte que quand j'appuie sur un bouton, une div qui n’était pas visible jusque là, devienne visible avec sur cette div un bouton"fermer" pour que la div redevienne invisible? :euh:
    Je pense que ça demande plus que du HTML/CSS, mais je demande quand même si vous avez quelque idées, postées-les, ça pourras finir en réponse concrète ;)
    • Partager sur Facebook
    • Partager sur Twitter
    Anonyme
      29 août 2012 à 16:35:14

      Tu y arrivera facilement avec l'utilisation du javascript. En modifiant le css d'une div lorsque tel ancre sera activé soit : en faisant passer ta div de display: none a visible.

      Voila le code :

      <script language="JavaScript">
      function show_hide_div(nomdiv){
      var lediv = document.getElementById(nomdiv);
      if(lediv.style.display=="block")
      lediv.style.display="none";
      else
      lediv.style.display="block";
      }
      </script>
      


      <button type="submit" value"clique" onClick="show_hide_div('id1')"/>
      <div id="id1">Mais ce que tu veu cahcer et faire apparaitre</div>
      
      • Partager sur Facebook
      • Partager sur Twitter
        29 août 2012 à 16:39:18

        Oui c'est possible,
        En html/css3 sans problème ex: http://tympanus.net/Tutorials/CSS3Lightbox/

        Cherche lightbox dans google

        • Partager sur Facebook
        • Partager sur Twitter
          29 août 2012 à 16:40:34

          D'acc d'acc
          Merci pour ta réponse ;)
          Le javascript est compatible avec le CSS donc ? (tu peut trouver cette question très nulle, mais je connais que le html pour l'instant ^^)

          Cool t'a réponse zyhou :D
          Je vais aller farfouiller dans le code source de ton lien ^^

          je vais quand même aller voir du côté de javascript ;)
          • Partager sur Facebook
          • Partager sur Twitter
            29 août 2012 à 16:41:51

            derien.

            http://tympanus.net/codrops/2011/12/26/css3-lightbox/ tu peux télécharger directement le code source.

            Oui il est compatible, il va changer les propriété css. Mais il ne sert pas qu'a ça0
            • Partager sur Facebook
            • Partager sur Twitter
            Anonyme
              29 août 2012 à 16:43:34

              Le javascript permet de modifier ton css en fonction de diverse action ici le fait de ciquer sur le bouton (regarde l'ancine poste je te l'ai édité avec le code).
              • Partager sur Facebook
              • Partager sur Twitter
                29 août 2012 à 16:49:19

                Mouais... ^^
                C'est du Javascript ça ?? j’appellerais ça du chinois x)

                Le Javascript il s'introduit où? dans le CSS ou dans le HTML ?
                • Partager sur Facebook
                • Partager sur Twitter
                  29 août 2012 à 16:54:41

                  Cherche pas en Javascript, apprend déjà le html5/css3, continu le cours et à après tu feras du Javascript.

                  Ca sert à rien de réinventer la roue, donc cherche google.
                  • Partager sur Facebook
                  • Partager sur Twitter
                    29 août 2012 à 16:57:11

                    ouep, pas faux.
                    je vais essayer de comprendre le code source de ton lien et puis au pire je re-chercherais sur google =)

                    Merci a vous deux ;)
                    • Partager sur Facebook
                    • Partager sur Twitter
                      29 août 2012 à 17:25:49

                      Bonjour Amarilis!

                      Teste le code ci-dessous! il pourra résoudre ton problème:

                      <!DOCTYPE html>
                      <html>
                          <head>
                              <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
                              <code type="css">
                                  #fondNoir
                                  {
                                      display: none; /*--masqué par défaut--*/
                                      background: #000;
                                      position: fixed; left: 0; top: 0;
                                      width: 100%; 
                                      height: 100%;
                                      opacity: .80;
                                      z-index: 9999;
                                  }
                      
                                  #infoComplet
                                  {
                                      margin: auto;
                                      display: none;
                                      width: 880px;
                                      height: 95%;
                                      min-height: 50%;
                                      top: 10px;
                                      position:fixed;
                                      background-color: #fff;
                                      background-repeat: repeat-x;
                                      z-index: 99999;
                                      padding: 10px;
                                      border: 1px #757576 solid;
                      
                                      border-radius: 10px;
                                  }
                              </code>
                      
                              <code type="javascript">
                                  function PopIn()
                                  {
                                      document.getElementById("fondNoir").style.display = "inline";
                                      document.getElementById("infoComplet").style.display = "inline";
                                  }
                                  
                                  function ClosePopIn()
                                  {
                                      document.getElementById("fondNoir").style.display ="none";
                                      document.getElementById("infoComplet").style.display = "none";
                          
                                  }
                              </code>
                              <title>Réalisation du POPIN</title>
                          </head>
                          <body style="margin:auto; width: 980px;">
                              <div id="fondNoir" onClick ="ClosePopIn()">
                              </div>
                      
                              <div id="infoComplet" ondblclick ="ClosePopIn()">
                                  Je crois bien que ceci pourra resoudre ton probleme  Amarilis !!!<hr/>
                                  <a href="javascript:ClosePopIn()">Fermer le popIn</a><br/>
                              </div>
                              
                              <a href="javascript:PopIn()">Test ici</a>
                              
                          </body>
                      </html>
                      
                      • Partager sur Facebook
                      • Partager sur Twitter
                      Loup beau Forever
                        30 août 2012 à 12:39:34

                        Bonjour rk.lubo (si je puis t'appeler comme cela ^^)
                        J'ai essayer ton code et ça me donner deux bouton sur lesquels je peut appuyer mais qui ne change rien a l'affichage de ma page.
                        Image utilisateur
                        • Partager sur Facebook
                        • Partager sur Twitter

                        div cacher/visible html/css

                        × 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