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.


    Bestiaire et Herbier avec triage

    Partagez
    avatar
    Onyx
    FémininAge : 23Messages : 3047

    le Lun 4 Juil 2016 - 6:55




    Bestiaire et Herbier avec triage


    Salut !

    Suite à la demande de Myosotis (qui s'était inspiré de ce bestiaire et cet herbier faits par Kamuy Sinen), j'ai fait un bestiaire et un herbier. Pour ceux qui ne le savent pas, un herbier est un recueil des végétaux d'un certain territoire. Quant au bestiaire, il s'agit d'un recueil des animaux/créatures d'un territoire.

    Pour voir l'aperçu du Bestiaire : cliquez ici.
    Pour voir l'aperçu de l'Herbier : cliquez ici.

    Effet spécial 1
    Quand on clique sur une catégorie, les animaux/végétaux sont triés et seuls ceux de la catégorie que vous avez sélectionnée apparaîssent. Vous pouvez personnaliser le code pour mettre les catégories que vous souhaitez.

    Effet spécial 2
    Si vous avez trop d'options dans le menu, vous pouvez rajouter un petit script qui vous permettra de réduire les menus et de les ouvrir en cliquant dessus pour qu'ils prennent moins de place.


    Ce LS est en quatre parties.
    • Tout d'abord, nous allons créer le bestiaire/herbier dans une page HTML.
    • Ensuite, nous allons voir comment le personnaliser.
    • Puis, nous allons voir comment ajouter l'option pour que les menus soient réduits.
    • Enfin, nous allons mettre le bestiaire/herbier dans un iframe pour le rendre accessible.


    Laisser le crédit vers Never-Utopia est obligatoire.


    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



    1. Créer le bestiaire/herbier (Page HTML)


    Pour commencer, nous allons créer une page HTML dans laquelle nous allons mettre le code de notre bestiaire/herbier.

    Pour cela, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > MODULES
    > > > HTML & JAVASCRIPT
    > > > > GESTION DES PAGES HTML

    Ensuite, on clique sur le bouton vert "Création en mode avancé (HTML)".
    On choisit un titre quelconque.
    On coche "Non" aux questions "Voulez-vous utiliser le haut et le bas de page de votre forum ?" et "Utiliser cette page en tant que page d'accueil ?".

    Pour le bestiaire, on met le code suivant et on enregistre :
    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <meta name="author" content="Onyx" />
      <title>Bestiaire</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
      <script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
      <link href="https://fonts.googleapis.com/css?family=Homemade+Apple|Architects+Daughter" rel="stylesheet" />
      <style type="text/css">
        /*Corps*/
        body {
        margin: 0px;
        background: #553723 url('https://wallpaperlayer.com/img/2015/5/simple-brown-background-8083-8397-hd-wallpapers.jpg');
        background-size: cover;
        }
        /*Le bloc entier du bestiaire*/
        #bestiaire {
        position: relative;
        padding-bottom: 10px;
        height: 590px;
        margin: 10px auto;
        width: 885px;
        overflow: hidden;
        background: url('https://img11.hostingpics.net/pics/405891bla.png');
        font-size: 13px;
        font-family: 'Homemade Apple', cursive;
        color: #705733;
        }
        /*Menu de gauche*/
        #menu {
        float: left;
        margin: 30px 0px 0px 80px;
        width: 350px;
        }
        .one_menu {
        float: left;
        margin: 0px 5px 5px 5px;
        width: 165px;
        }
        /*Titres des catégories*/
        .menu_title {
        display: inline-block;
        margin-left: 20px;
        border-bottom: 1px solid #705733;
        color: #705733;
        font-weight: bold;
        font-size: 14px;
        }
        #menu ul {
        margin-top: 5px;
        margin-bottom: 10px;
        }
        .menus + ul {
        overflow: hidden;
        transition: 0.8s;
        -webkit-transition: 0.5s;
        }
        /*Images pour les menus rétrécis*/
        .menus img {
        display: none;
        position: relative;
        bottom: -10px;
        opacity: 0.8;
        }
        /*Catégories*/
        .bestonglet {
        margin-left: -20px;
        color: #705733;
        list-style-type: circle;
        }
        /*Catégories non-actives*/
        .bestonglet_0 {
        cursor: pointer;
        transition: 0.5s;
        -webkit-transition: 0.5s;
        }
        /*Catégories non-actives survolées*/
        .bestonglet_0:hover {
        margin-left: -10px;
        }
        /*Catégorie active*/
        .bestonglet_1 {
        margin-left: -10px;
        color: #2b2010;
        font-weight: bold;
        }
        /*Partie de droite*/
        #middle {
        float: right;
        width: 330px;
        margin: 30px 85px 0px 0px;
        height: 465px;
        text-align: center;
        }
        /*Cache le contenu des catégories non-actives*/
        .contenu_bestonglet {
        display: none;
        height: 465px;
        padding-right: 5px;
        overflow: auto;
        }
        /*Center les créatures*/
        .contenu_bestonglet > div {
        margin: 0px auto;
        padding: 10px 0px;
        font-family: 'Architects Daughter', cursive;
        font-size: 14px;
        border-top: 5px double #705733;
        }
        /*Center les créatures*/
        .contenu_bestonglet > div:nth-child(1) {
        padding: 0px 0px 10px 0px;
        border-top: none;
        }
        /*Nom de créature*/
        .creature_name {
        margin: auto;
        color: #a68e68;
        text-shadow: -1px -1px 1px #000000;
        font-size: 24px;
        font-family: cambria;
        text-transform: uppercase;
        }
        /*Bloc de créacture sous le nom*/
        .creature_bloc {
        margin: auto;
        }
        /*Image de créature*/
        .creature_bloc > img:first-child {
        margin: auto;
        width: 300px;
        border: 2px solid #705733;
        height: 150px;
        }
        /*Bloc de description de créature*/
        .creature_in {
        margin: auto;
        text-align: center;
        width: 300px;
        }
        /*Caractéristiques de la créature*/
        .creature_caract {
        font-weight: bold;
        }
        /*Partie de droite de la description de créature*/
        .creature_desc {
        text-align: justify;
        }
        /*Credit*/
        .credits {
        font-size: 12px;
        position: absolute;
        width: 200px;
        bottom: 30px;
        left: 150px;
        font-family: verdana;
        color: #503713;
        }
        a {
        text-decoration: none;
        color: #503713;
        }
        a:hover {
        color: darkred;
        }
      </style>
      <script type="text/javascript">
        //<!--
          $(function() {
            /*Tableau qui va contenir tous les noms de catégories*/
            var nom = [];
            /*Total de noms de catégories*/
            var nbnoms = $('#menu').find('li span').length;
            /*On met les noms de catégories dans le tableau*/
            for (i = 0; i < nbnoms; i++) {
              nom[i] = $('#menu').find('li span').eq(i).attr('class');
            }
            /*Nombre de bêtes*/
            var nbbetes = $('#contenu_bestonglet_Tout').children('div').length;
            /*Pour chaque catégories, on va regarder chaque bête pour les trier dans les bonnes catégories*/
            for (i = 0; i < nbnoms; i++) {
              var nom2 = nom[i];
              for (y = 0; y < nbbetes; y++) {
                var nom3 = $('#contenu_bestonglet_Tout').children('div').eq(y);
                if (nom3.hasClass(nom2)) {
                  var copiecrea = nom3.clone(true);
                  var oucoller = $('#contenu_bestonglet_'+nom2);
                  $(copiecrea).appendTo(oucoller);
                }
              }
            }
          });
        //-->
      </script>
      <script type="text/javascript">
        //<!--
        function change_bestonglet(name) {
            document.getElementById('bestonglet_'+anc_bestonglet).className = 'bestonglet_0 bestonglet';
            document.getElementById('bestonglet_'+name).className = 'bestonglet_1 bestonglet';
            document.getElementById('contenu_bestonglet_'+anc_bestonglet).style.display = 'none';
            document.getElementById('contenu_bestonglet_'+name).style.display = 'block';
            anc_bestonglet = name;
          }
        //-->
      </script>
    </head>
    <body>
      <div id="bestiaire">
        <div class="credits">Par Onyx de <a href="http://www.never-utopia.com/forum" target="_blank" >Never-Utopia</a></div>
        <div id="menu">

          <!-- DÉBUT 1ERE LISTE -->
          <div class="one_menu">
            <span class="menu_title menus">Type<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
            <ul>
              <li class="bestonglet_1 bestonglet" id="bestonglet_Tout" onclick="javascript:change_bestonglet('Tout');">
                <span class="Tout">Tous les types</span>
              </li>
              <li class="bestonglet_0 bestonglet" id="bestonglet_Mammi" onclick="javascript:change_bestonglet('Mammi');">
                <span class="Mammi">Mammifères</span>
              </li>
              <li class="bestonglet_0 bestonglet" id="bestonglet_Oiseaux" onclick="javascript:change_bestonglet('Oiseaux');">
                <span class="Oiseaux">Oiseaux</span>
              </li>
              <li class="bestonglet_0 bestonglet" id="bestonglet_Poissons" onclick="javascript:change_bestonglet('Poissons');">
                <span class="Poissons">Poissons</span>
              </li>
              <li class="bestonglet_0 bestonglet" id="bestonglet_Reptiles" onclick="javascript:change_bestonglet('Reptiles');">
                <span class="Reptiles">Reptiles</span>
              </li>
              <li class="bestonglet_0 bestonglet" id="bestonglet_Amphibiens" onclick="javascript:change_bestonglet('Amphibiens');">
                <span class="Amphibiens">Amphibiens</span>
              </li>
              <li class="bestonglet_0 bestonglet" id="bestonglet_Insectes" onclick="javascript:change_bestonglet('Insectes');">
                <span class="Insectes">Insectes et Arachnides</span>
              </li>
            </ul>
          </div>
          <!-- FIN 1ERE LISTE -->

          <!-- DÉBUT 2E LISTE -->
          <div class="one_menu">
            <span class="menu_title menus">Habitat<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
            <ul>
              <li class="bestonglet_0 bestonglet" id="bestonglet_Jungle" onclick="javascript:change_bestonglet('Jungle');">
                <span class="Jungle">Jungle</span>
              </li>
              <li class="bestonglet_0 bestonglet" id="bestonglet_Plaines" onclick="javascript:change_bestonglet('Plaines');">
                <span class="Plaines">Plaines</span>
              </li>
              <li class="bestonglet_0 bestonglet" id="bestonglet_Foret" onclick="javascript:change_bestonglet('Foret');">
                <span class="Foret">Forêt</span>
              </li>
              <li class="bestonglet_0 bestonglet" id="bestonglet_Montagne" onclick="javascript:change_bestonglet('Montagne');">
                <span class="Montagne">Montagne</span>
              </li>
              <li class="bestonglet_0 bestonglet" id="bestonglet_Glace" onclick="javascript:change_bestonglet('Glace');">
                <span class="Glace">Glaciers</span>
              </li>
              <li class="bestonglet_0 bestonglet" id="bestonglet_Desert" onclick="javascript:change_bestonglet('Desert');">
                <span class="Desert">Désert</span>
              </li>
              <li class="bestonglet_0 bestonglet" id="bestonglet_Volcan" onclick="javascript:change_bestonglet('Volcan');">
                <span class="Volcan">Volcan</span>
              </li>
              <li class="bestonglet_0 bestonglet" id="bestonglet_Ocean" onclick="javascript:change_bestonglet('Ocean');">
                <span class="Ocean">Océans et Mers</span>
              </li>
              <li class="bestonglet_0 bestonglet" id="bestonglet_Lac" onclick="javascript:change_bestonglet('Lac');">
                <span class="Lac">Lacs et Rivières</span>
              </li>
            </ul>
          </div>
          <!-- FIN 2E LISTE -->
          <div style="clear: both;"></div>

          <!-- DÉBUT 3E LISTE -->
          <div class="one_menu">
            <span class="menu_title menus">Rareté<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
            <ul>
              <li class="bestonglet_0 bestonglet" id="bestonglet_Commun" onclick="javascript:change_bestonglet('Commun');">
                <span class="Commun">Commun</span>
              </li>
              <li class="bestonglet_0 bestonglet" id="bestonglet_Rare" onclick="javascript:change_bestonglet('Rare');">
                <span class="Rare">Rare</span>
              </li>
              <li class="bestonglet_0 bestonglet" id="bestonglet_Tresrare" onclick="javascript:change_bestonglet('Tresrare');">
                <span class="Tresrare">Très rare</span>
              </li>
              <li class="bestonglet_0 bestonglet" id="bestonglet_Myth" onclick="javascript:change_bestonglet('Myth');">
                <span class="Myth">Mythique</span>
              </li>
            </ul>
          </div>
          <!-- FIN 3E LISTE -->

          <!-- DÉBUT 4E LISTE -->
          <div class="one_menu">
            <span class="menu_title menus">Dangerosité<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
            <ul>
              <li class="bestonglet_0 bestonglet" id="bestonglet_Ino" onclick="javascript:change_bestonglet('Ino');">
                <span class="Ino">Inoffensif</span>
              </li>
              <li class="bestonglet_0 bestonglet" id="bestonglet_Faible" onclick="javascript:change_bestonglet('Faible');">
                <span class="Faible">Faible</span>
              </li>
              <li class="bestonglet_0 bestonglet" id="bestonglet_Danger" onclick="javascript:change_bestonglet('Danger');">
                <span class="Danger">Dangereux</span>
              </li>
              <li class="bestonglet_0 bestonglet" id="bestonglet_Mortel" onclick="javascript:change_bestonglet('Mortel');">
                <span class="Mortel">Mortel</span>
              </li>
            </ul>
          </div>
          <!-- FIN 4E LISTE -->

          <div style="clear: both;"></div>
        </div>
        <div id="middle">
          <div class="contenu_bestonglet" id="contenu_bestonglet_Tout">
           
          <!-- DÉBUT 1ER ANIMAL -->
            <div class="Mammi Jungle Commun Ino">
              <div class="creature_name">Nom de l'animal</div>
              <div class="creature_bloc">
                <img src="http://img15.hostingpics.net/pics/923631761.png" />
                <div class="creature_in">
                  <div class="creature_caract">
                    Mammifère - Jungle - Commun - Inoffensif
                  </div>
                  <div class="creature_desc">
                    Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.
                  </div>
                </div>
              </div>
            </div>
            <!-- FIN 1ER ANIMAL -->
           
            <!-- DÉBUT 2E ANIMAL -->
            <div class="Mammi Plaines Rare Faible">
              <div class="creature_name">Nom de l'animal</div>
              <div class="creature_bloc">
                <img src="http://img15.hostingpics.net/pics/169146302.png" />
                <div class="creature_in">
                  <div class="creature_caract">
                    Mammifère - Plaines - Rare - Faible
                  </div>
                  <div class="creature_desc">
                    Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.
                  </div>
                </div>
              </div>
            </div>
            <!-- FIN 2E ANIMAL -->

            <!-- DÉBUT 3E ANIMAL -->
            <div class="Oiseaux Foret Tresrare Danger">
              <div class="creature_name">Nom de l'animal</div>
              <div class="creature_bloc">
                <img src="http://img15.hostingpics.net/pics/380578583.png" />
                <div class="creature_in">
                  <div class="creature_caract">
                    Oiseau - Forêt - Très rare - Dangereux
                  </div>
                  <div class="creature_desc">
                    Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.
                  </div>
                </div>
              </div>
            </div>
            <!-- FIN 3E ANIMAL -->

          </div>

          <div class="contenu_bestonglet" id="contenu_bestonglet_Mammi"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Oiseaux"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Poissons"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Reptiles"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Amphibiens"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Insectes"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Jungle"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Plaines"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Foret"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Montagne"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Glace"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Desert"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Volcan"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Ocean"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Lac"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Commun"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Rare"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Tresrare"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Myth"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Ino"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Faible"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Danger"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Mortel"></div>

        </div>
        <div style="clear: both;"></div>
      </div>
    <script type="text/javascript">
      //<!--
        var anc_bestonglet = 'Tout';
        change_bestonglet(anc_bestonglet);
      //-->
    </script>
    </body>
    </html>

    Pour l'herbier, on met le code suivant et on enregistre :
    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <meta name="author" content="Onyx" />
      <title>Herbier</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
      <script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
      <link href="https://fonts.googleapis.com/css?family=Homemade+Apple|Architects+Daughter" rel="stylesheet" />
      <style type="text/css">
        /*Corps*/
        body {
        margin: 0px;
        background: #553723 url('https://img11.hostingpics.net/pics/782158bla.jpg');
        background-size: cover;
        }
        /*Le bloc entier du herbier*/
        #herbier {
        position: relative;
        padding-bottom: 10px;
        height: 590px;
        margin: 10px auto;
        width: 885px;
        overflow: hidden;
        background: url('https://img11.hostingpics.net/pics/740116bla.png');
        font-size: 13px;
        font-family: 'Homemade Apple', cursive;
        color: #0f5228;
        }
        /*Menu de gauche*/
        #menu {
        float: left;
        margin: 30px 0px 0px 80px;
        width: 350px;
        }
        .one_menu {
        float: left;
        margin: 0px 5px 5px 5px;
        width: 165px;
        }
        /*Titres des catégories*/
        .menu_title {
        display: inline-block;
        margin-left: 20px;
        border-bottom: 1px solid #0f5228;
        color: #0f5228;
        font-weight: bold;
        font-size: 14px;
        }
        #menu ul {
        margin-top: 5px;
        margin-bottom: 10px;
        }
        .menus + ul {
        overflow: hidden;
        transition: 0.8s;
        -webkit-transition: 0.5s;
        }
        /*Images pour les menus rétrécis*/
        .menus img {
        display: none;
        position: relative;
        bottom: -10px;
        opacity: 0.8;
        }
        /*Catégories*/
        .herbonglet {
        margin-left: -20px;
        color: #0f5228;
        list-style-type: circle;
        }
        /*Catégories non-actives*/
        .herbonglet_0 {
        cursor: pointer;
        transition: 0.5s;
        -webkit-transition: 0.5s;
        }
        /*Catégories non-actives survolées*/
        .herbonglet_0:hover {
        margin-left: -10px;
        }
        /*Catégorie active*/
        .herbonglet_1 {
        margin-left: -10px;
        color: #093319;
        font-weight: bold;
        }
        /*Partie de droite*/
        #middle {
        float: right;
        width: 330px;
        margin: 30px 85px 0px 0px;
        height: 465px;
        text-align: center;
        }
        /*Cache le contenu des catégories non-actives*/
        .contenu_herbonglet {
        display: none;
        height: 465px;
        padding-right: 5px;
        overflow: auto;
        }
        /*Center les plantes*/
        .contenu_herbonglet > div {
        margin: 0px auto;
        padding: 10px 0px;
        font-family: 'Architects Daughter', cursive;
        font-size: 14px;
        border-top: 5px double #0f5228;
        }
        /*Center les plantes*/
        .contenu_herbonglet > div:nth-child(1) {
        padding: 0px 0px 10px 0px;
        border-top: none;
        }
        /*Nom de la plante*/
        .plante_name {
        margin: auto;
        color: #4e9f4c;
        text-shadow: -1px -1px 1px #000000;
        font-size: 24px;
        font-family: cambria;
        text-transform: uppercase;
        }
        /*Bloc de la plante sous le nom*/
        .plante_bloc {
        margin: auto;
        }
        /*Image de plante*/
        .plante_bloc > img:first-child {
        margin: auto;
        width: 300px;
        border: 2px solid #0f5228;
        height: 150px;
        }
        /*Bloc de description de la plante*/
        .plante_in {
        margin: auto;
        text-align: center;
        width: 300px;
        }
        /*Caractéristiques de la plante*/
        .plante_caract {
        font-weight: bold;
        }
        /*Partie de droite de la description de la plante*/
        .plante_desc {
        text-align: justify;
        }
        /*Credit*/
        .credits {
        font-size: 12px;
        position: absolute;
        width: 200px;
        bottom: 30px;
        left: 150px;
        font-family: verdana;
        color: #0f5228;
        }
        a {
        text-decoration: none;
        color: #0f5228;
        }
        a:hover {
        color: #198842;
        }
      </style>
      <script type="text/javascript">
        //<!--
          $(function() {
            /*Tableau qui va contenir tous les noms de catégories*/
            var nom = [];
            /*Total de noms de catégories*/
            var nbnoms = $('#menu').find('li span').length;
            /*On met les noms de catégories dans le tableau*/
            for (i = 0; i < nbnoms; i++) {
              nom[i] = $('#menu').find('li span').eq(i).attr('class');
            }
            /*Nombre de bêtes*/
            var nbbetes = $('#contenu_herbonglet_Tout').children('div').length;
            /*Pour chaque catégories, on va regarder chaque bête pour les trier dans les bonnes catégories*/
            for (i = 0; i < nbnoms; i++) {
              var nom2 = nom[i];
              for (y = 0; y < nbbetes; y++) {
                var nom3 = $('#contenu_herbonglet_Tout').children('div').eq(y);
                if (nom3.hasClass(nom2)) {
                  var copiecrea = nom3.clone(true);
                  var oucoller = $('#contenu_herbonglet_'+nom2);
                  $(copiecrea).appendTo(oucoller);
                }
              }
            }
          });
        //-->
      </script>
      <script type="text/javascript">
        //<!--
        function change_herbonglet(name) {
            document.getElementById('herbonglet_'+anc_herbonglet).className = 'herbonglet_0 herbonglet';
            document.getElementById('herbonglet_'+name).className = 'herbonglet_1 herbonglet';
            document.getElementById('contenu_herbonglet_'+anc_herbonglet).style.display = 'none';
            document.getElementById('contenu_herbonglet_'+name).style.display = 'block';
            anc_herbonglet = name;
          }
        //-->
      </script>
    </head>
    <body>
      <div id="herbier">
        <div class="credits">Par Onyx de <a href="http://www.never-utopia.com/forum" target="_blank" >Never-Utopia</a></div>
        <div id="menu">

          <!-- DÉBUT 1ERE LISTE -->
          <div class="one_menu">
            <span class="menu_title menus">Usage<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
            <ul>
              <li class="herbonglet_1 herbonglet" id="herbonglet_Tout" onclick="javascript:change_herbonglet('Tout');">
                <span class="Tout">Tous</span>
              </li>
              <li class="herbonglet_0 herbonglet" id="herbonglet_Alimentaire" onclick="javascript:change_herbonglet('Alimentaire');">
                <span class="Alimentaire">Pour nourrir</span>
              </li>
              <li class="herbonglet_0 herbonglet" id="herbonglet_Medecine" onclick="javascript:change_herbonglet('Medecine');">
                <span class="Medecine">Pour soigner</span>
              </li>
              <li class="herbonglet_0 herbonglet" id="herbonglet_Poison" onclick="javascript:change_herbonglet('Poison');">
                <span class="Poison">Pour empoisonner</span>
              </li>
              <li class="herbonglet_0 herbonglet" id="herbonglet_Outil" onclick="javascript:change_herbonglet('Outil');">
                <span class="Outil">Pour fabriquer</span>
              </li>
              <li class="herbonglet_0 herbonglet" id="herbonglet_Joli" onclick="javascript:change_herbonglet('Joli');">
                <span class="Joli">Pour décorer</span>
              </li>
            </ul>
          </div>
          <!-- FIN 1ERE LISTE -->

          <!-- DÉBUT 2E LISTE -->
          <div class="one_menu">
            <span class="menu_title menus">Floraison<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
            <ul>
              <li class="herbonglet_0 herbonglet" id="herbonglet_Printemps" onclick="javascript:change_herbonglet('Printemps');">
                <span class="Printemps">Printemps</span>
              </li>
              <li class="herbonglet_0 herbonglet" id="herbonglet_Ete" onclick="javascript:change_herbonglet('Ete');">
                <span class="Ete">Été</span>
              </li>
              <li class="herbonglet_0 herbonglet" id="herbonglet_Automne" onclick="javascript:change_herbonglet('Automne');">
                <span class="Automne">Automne</span>
              </li>
              <li class="herbonglet_0 herbonglet" id="herbonglet_Hiver" onclick="javascript:change_herbonglet('Hiver');">
                <span class="Hiver">Hiver</span>
              </li>
              <li class="herbonglet_0 herbonglet" id="herbonglet_Annuel" onclick="javascript:change_herbonglet('Annuel');">
                <span class="Annuel">Toute l'année</span>
              </li>
            </ul>
          </div>
          <!-- FIN 2E LISTE -->
          <div style="clear: both;"></div>
         
          <!-- DÉBUT 3E LISTE -->
          <div class="one_menu">
            <span class="menu_title menus">Habitat<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
            <ul>
              <li class="herbonglet_0 herbonglet" id="herbonglet_Sub" onclick="javascript:change_herbonglet('Sub');">
                <span class="Sub">Sub-Tropical</span>
              </li>
              <li class="herbonglet_0 herbonglet" id="herbonglet_Tropical" onclick="javascript:change_herbonglet('Tropical');">
                <span class="Tropical">Tropical</span>
              </li>
              <li class="herbonglet_0 herbonglet" id="herbonglet_Foret" onclick="javascript:change_herbonglet('Foret');">
                <span class="Foret">Forêt</span>
              </li>
              <li class="herbonglet_0 herbonglet" id="herbonglet_Montagne" onclick="javascript:change_herbonglet('Montagne');">
                <span class="Montagne">Montagne</span>
              </li>
            </ul>
          </div>
          <!-- FIN 3E LISTE -->

          <!-- DÉBUT 4E LISTE -->
          <div class="one_menu">
            <span class="menu_title menus">Rareté<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
            <ul>
              <li class="herbonglet_0 herbonglet" id="herbonglet_Commun" onclick="javascript:change_herbonglet('Commun');">
                <span class="Commun">Commun</span>
              </li>
              <li class="herbonglet_0 herbonglet" id="herbonglet_Rare" onclick="javascript:change_herbonglet('Rare');">
                <span class="Rare">Rare</span>
              </li>
              <li class="herbonglet_0 herbonglet" id="herbonglet_Tresrare" onclick="javascript:change_herbonglet('Tresrare');">
                <span class="Tresrare">Très rare</span>
              </li>
            </ul>
          </div>
          <!-- FIN 4E LISTE -->
          <div style="clear: both;"></div>
        </div>
        <div id="middle">
          <div class="contenu_herbonglet" id="contenu_herbonglet_Tout">
           
          <!-- DÉBUT 1ERE PLANTE -->
            <div class="Alimentaire Ete Foret Commun">
              <div class="plante_name">Nom de la plante</div>
              <div class="plante_bloc">
                <img src="http://www.onlinetransilvania.ro/wp-content/uploads/2014/03/IMG_9857-1300x866-450x150-croped.jpg" />
                <div class="plante_in">
                  <div class="plante_caract">
                    Pour nourrir - Éte - Forêt - Commun
                  </div>
                  <div class="plante_desc">
                    Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.
                  </div>
                </div>
              </div>
            </div>
            <!-- FIN 1ERE PLANTE -->
           
            <!-- DÉBUT 2E PLANTE -->
            <div class="Poison Printemps Foret Tresrare">
              <div class="plante_name">Nom de la plante</div>
              <div class="plante_bloc">
                <img src="http://www.sylvie-tribut-astrologue.com/wp-content/uploads/2015/09/12-LE-PISSENLIT.jpg" />
                <div class="plante_in">
                  <div class="plante_caract">
                    Pour empoisonner - Printemps<br />Forêt - Très rare
                  </div>
                  <div class="plante_desc">
                    Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.
                  </div>
                </div>
              </div>
            </div>
            <!-- FIN 2E PLANTE -->

            <!-- DÉBUT 3E PLANTE -->
            <div class="Medecine Hiver Montagne Rare">
              <div class="plante_name">Nom de la plante</div>
              <div class="plante_bloc">
                <img src="http://victorianviolas.co.uk/wp-content/uploads/2015/10/parade-closeup-450x150.jpg" />
                <div class="plante_in">
                  <div class="plante_caract">
                    Pour soigner - Hiver - Montagne - Rare
                  </div>
                  <div class="plante_desc">
                    Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.
                  </div>
                </div>
              </div>
            </div>
            <!-- FIN 3E PLANTE -->

          </div>
         
          <div class="contenu_herbonglet" id="contenu_herbonglet_Alimentaire"></div>
          <div class="contenu_herbonglet" id="contenu_herbonglet_Medecine"></div>
          <div class="contenu_herbonglet" id="contenu_herbonglet_Poison"></div>
          <div class="contenu_herbonglet" id="contenu_herbonglet_Outil"></div>
          <div class="contenu_herbonglet" id="contenu_herbonglet_Joli"></div>
          <div class="contenu_herbonglet" id="contenu_herbonglet_Printemps"></div>
          <div class="contenu_herbonglet" id="contenu_herbonglet_Ete"></div>
          <div class="contenu_herbonglet" id="contenu_herbonglet_Automne"></div>
          <div class="contenu_herbonglet" id="contenu_herbonglet_Hiver"></div>
          <div class="contenu_herbonglet" id="contenu_herbonglet_Annuel"></div>
          <div class="contenu_herbonglet" id="contenu_herbonglet_Sub"></div>
          <div class="contenu_herbonglet" id="contenu_herbonglet_Tropical"></div>
          <div class="contenu_herbonglet" id="contenu_herbonglet_Foret"></div>
          <div class="contenu_herbonglet" id="contenu_herbonglet_Montagne"></div>
          <div class="contenu_herbonglet" id="contenu_herbonglet_Commun"></div>
          <div class="contenu_herbonglet" id="contenu_herbonglet_Rare"></div>
          <div class="contenu_herbonglet" id="contenu_herbonglet_Tresrare"></div>
         
        </div>
        <div style="clear: both;"></div>
      </div>
    <script type="text/javascript">
      //<!--
        var anc_herbonglet = 'Tout';
        change_herbonglet(anc_herbonglet);
      //-->
    </script>
    </body>
    </html>

    Lorsque vous modifiez votre formulaire, il faut cliquer sur le triple engrenage (), pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.



    2. Personnaliser le bestiaire/herbier


    Il y a plusieurs parties au code. Il y a la section "menu" avec des catégories et des onglets où il y a des sous-catégories. Puis, il y a la section "contenu d'onglet" de "Tout" où il y a tous les végétaux/animaux. Enfin, il y a la section "contenu d'onglets" des sous-catégories dans lesquels les végétaux/animaux sont triés.

    Le menu et divisé en plusieurs carégories et sous-catégories.

    Voici un exemple du bestiaire de 1 catégorie qui a 4 sous-catégories :
    Code:
          <!-- DÉBUT 3E LISTE -->
          <div class="one_menu">
            <span class="menu_title menus">Rareté<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
            <ul>
              <li class="bestonglet_0 bestonglet" id="bestonglet_Commun" onclick="javascript:change_bestonglet('Commun');">
                <span class="Commun">Commun</span>
              </li>
              <li class="bestonglet_0 bestonglet" id="bestonglet_Rare" onclick="javascript:change_bestonglet('Rare');">
                <span class="Rare">Rare</span>
              </li>
              <li class="bestonglet_0 bestonglet" id="bestonglet_Tresrare" onclick="javascript:change_bestonglet('Tresrare');">
                <span class="Tresrare">Très rare</span>
              </li>
              <li class="bestonglet_0 bestonglet" id="bestonglet_Myth" onclick="javascript:change_bestonglet('Myth');">
                <span class="Myth">Mythique</span>
              </li>
            </ul>
          </div>
          <!-- FIN 3E LISTE -->

    Le premier span est le nom de la catégorie. Ensuite, on a une liste qui contient les sous-catégories.

    Chaque sous-catégorie est sous cette forme :
    Code:
            <li class="bestonglet_0 bestonglet" id="bestonglet_Myth" onclick="javascript:change_bestonglet('Myth');">
              <span class="Myth">Mythique</span>
            </li>

    À noter qu'il y a 3 endroits dans cette sous-catégorie où vous trouvez le mot "Myth", soit dans le "id" du "li", dans les parenthèses du "onclick" du "li"dans dans la "class" du "span" qui entoure le nom de la catégorie.

    Ce mot, "Myth", permet d'identifier cette sous-catégorie et permettra aussi d'identifier l'animal qui y appartiendra alors c'est important qu'il soit pareil aux 3 endroits.




    Ensuie, on passe à la section où il y a tous les animaux (contenu d'onlglet "Tout"). Vous y trouverez des animaux sous cette forme :
    Code:
            <!-- DÉBUT 3E ANIMAL -->
            <div class="Oiseaux Foret Tresrare Danger">
              <div class="creature_name">Nom de l'animal</div>
              <div class="creature_bloc">
                <img src="http://img15.hostingpics.net/pics/380578583.png" />
                <div class="creature_in">
                  <div class="creature_caract">
                    Oiseau - Forêt - Très rare - Dangereux
                  </div>
                  <div class="creature_desc">
                    Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.
                  </div>
                </div>
              </div>
            </div>
            <!-- FIN 3E ANIMAL -->

    Vous voyez que la classe de la première div contient plusieurs classes :
    Code:
            <div class="Oiseaux Foret Tresrare Danger">

    Ces classes correspondent aux sous-catégories auxquelles l'animal appartient. Du coup, quand vous créez votre animal, vous devez vous rendre dans les sous-catégories et regarder quel "mot" vous avez mis pour identifier les sous-catégories auxquelles l'animal contient et vous le mettez dans la classe de l'animal.

    Ici, j'ai 4 classes parce que l'animal appartient à 4 sous-catégories, soit Oiseaux, Forêt, Très rare et Dangereux.




    Enfin, vous avez les contenus d'onglets vides où les animaux seront distribués selon les sous-catégories auxquelles ils appartiennent :
    Code:
          <div class="contenu_bestonglet" id="contenu_bestonglet_Mammi"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Oiseaux"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Poissons"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Reptiles"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Amphibiens"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Insectes"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Jungle"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Plaines"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Foret"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Montagne"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Glace"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Desert"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Volcan"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Ocean"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Lac"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Commun"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Rare"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Tresrare"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Myth"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Ino"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Faible"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Danger"></div>
          <div class="contenu_bestonglet" id="contenu_bestonglet_Mortel"></div>

    Encore une fois, à la fin du "id" de chaque contenu d'onglet, vous avez le "nom" propre à chaque sous-catégorie.

    Donc si je résume, vous devez choisir un certain "nom" (qui ne doit pas avoir d'espaces ou d'accents idéalement) qui doit être à 3 fois dans l'onglet de la sous-catégorie, 1 fois dans la classe des animaux qui appartiennent à la sous-catégorie et 1 fois dans l'id dans un contenu d'onglet où seront triés les animaux.

    Avec ces informations, vous devriez être capable de personnaliser le reste par vous-même Wink

    Note : J'ai pris des exemples avec le bestiaire, sauf que l'herbier est identique à l'exception du nom de certaines classes. Du coup, vous devriez être capable de vous débrouiller ^^



    3. Option pour réduire les menus


    Il suffit simplement d'aller juste avant la fermeture de la balise "body", soit juste avant cela :
    Code:
    </body>
    </html>

    Et d'y rajouter ce bout de code :
    Code:
    <script text="javascript">
      //<!--
        $('.menus').find('img').css("display", "inline-block");
        $('.menus').find('img').css("margin-left", "5px");
        $('.menus').css("cursor", "pointer");
        $('.menus').next().css("max-height", "0px");
        $('.menus').click(function(){
          $('.menus').css("cursor", "pointer");
          $('.menus').next().css("max-height", "0px");
          var bam = $(this).next().find('li').length;
          var boum = (bam * 28) * 45;
          $(this).next().css("max-height", boum+"px");
          $(this).css("cursor", "default");
         });
      //-->
    </script>



    4. Mettre le bestiaire/herbier dans un iframe


    Maintenant que la page HTML est créée avec le bestiaire/herbier, il faut le mettre accessible aux membres.

    Pour cela, vous devez vous rendre là où vous voulez que le bestiaire/herbier soit et y mettre le code suivant :
    Code:
    <iframe style="display: block; height: 600px; width: 885px; margin: auto;" src="LIEN DE LA PAGE HTML" frameborder="0"></iframe>

    Comme vous pouvez le deviner, il faut mettre le lien de la page HTML là où c'est écrit. Mais peut-être que vous vous demandez d'où sort ce lien? Ce n'est pas trop compliqué ^^

    Quand on va dans la gestion de nos pages HTML, la dernière qui a été enregistrée (donc normalement, votre bestiaire/herbier), se trouve en haut de la liste. Il vous suffit de copier l'url de votre page HTML et de la mettre là où nous l'avons vu ci-haut. C'est vraiment écrit "URL DU LIEN", alors vous ne pouvez pas vous tromper Wink

    Vous aurez peut-être besoin de modifier le height (la hauteur) et le width (la largeur) pour qu'il n'y a pas de barre de défilement (scroll).





    C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous avez besoin d'aide pour personnaliser le code.

    À plus !


    Dernière édition par Onyx le Ven 29 Sep 2017 - 16:29, édité 13 fois



    avatar
    Crépuscule de Lune
    FémininAge : 29Messages : 49

    le Mar 20 Juin 2017 - 20:46

    Je te remercie vraiment ! Je cherchais le système du bestiaire depuis un bon moment (j'aurais été contente d'avoir un tutoriel, alors un LS c'est vraiment super !). Je vais me plonger là-dedans pour personnaliser ça pour mon forum. Mille fois merci pour tes codes :hug:




    avatar
    Kipouille
    FémininAge : 22Messages : 14

    le Mer 21 Juin 2017 - 17:58

    Merci à toi :) Je ne cherchais pas du tout à faire un bestiaire, mais finalement ça peut m'être utile :)
    avatar
    Apollo Justice
    MasculinAge : 21Messages : 1166

    le Dim 25 Juin 2017 - 15:14

    Merci beaucoup, bonne continuation pour la suite. :)




    À bout de bras, à bout de larmes, j'ai construit mon Paradis
    J'ai fait comme Magritte, j'ai mis un verre sur l'parapluie
    Dans ma tête, j'ai tout rangé, j'ai soigné ma maladie
    Et je prends gout à être carré, un peu comme un cube Maggi
    Et je me sens comme Tyson, sur son toit, devant son pigeonnier
    Je l'ai déjà prouvé, j'ferais tout pour protéger
    Mon petit coin de Paradis, mon sas de décompression
    God damn, je suis happy, personne pourra m'le voler
    Je suis high, je suis high, sans avion, j'ai décollé
    Entouré des miens, je suis comme auréolé!
    avatar
    Eiv
    MasculinAge : 22Messages : 503

    le Ven 30 Juin 2017 - 13:37

    Je m"en sert depuis déjà longtemps ^^ merci



    avatar
    Ayael
    FémininAge : 22Messages : 579

    le Sam 1 Juil 2017 - 17:36

    Oh, je trouve ça super ! Le côté tri manque souvent dans les bestiaires, merci à toi !
    avatar
    CaraDelevngnie
    FémininAge : 18Messages : 365

    le Ven 11 Aoû 2017 - 10:52

    J'adore vraiment ce petit bestiaire, je n'avais jamais vu ça, mais ça à l'air tellement pratique ! Merci beaucoup !

    EDIT : Hello hello,
    je tiens à signaler une erreur, je ne sais pas si je suis là seule à avoir ça, j'ai essayé de placer ce joli petit bestiaire sur un forum en construction. Lorsque je demande à prévisualiser la page HTML, tout va bien. Mais une fois que je valide, la description ne s'affiche plus, et pareil quand j'essaye de le mettre en iFrame, je ne sais pas si c'est à cause de mon forum, mais je tenais à te le signaler Wink
    Merci encore à toi en tout cas !



    avatar
    Face Lightwood
    FémininAge : 17Messages : 8

    le Sam 2 Sep 2017 - 15:14

    Bonjour,

    Cet ouvrage est magnifique !
    Merci de l'avoir partagé.

    :)

    Edit : Nous avons deux soucis.
    Le premier est exactement le même que la personne au-dessus. Les descriptions ne s'affichent pas.
    Je ne sais pas pourquoi car je n'ai rien modifié sur le code.

    le deuxième est que j'ai crée un groupe (avec des lettres "X"). J’espérai que la créature se mette dans cette catégorie mais ne le fait pas.
    De plus les menus sélectionnes, restent sélectionnes.

    :/
    avatar
    CaraDelevngnie
    FémininAge : 18Messages : 365

    le Sam 2 Sep 2017 - 17:37

    Coucou,
    Je me permets de répondre, comme j'ai eu le même soucis, en fait c'est parce que je n'allais pas dans le HTML avancé, ce qui causait donc des déformations dans le code. Du coup, si tu cliques sur les trois petits écrous au lieu de celui seul, ton codage devrait se remettre tout seul Wink !
    En espérant t'avoir aidé !



    avatar
    Face Lightwood
    FémininAge : 17Messages : 8

    le Sam 2 Sep 2017 - 21:04

    @CaraDelevngnie a écrit:Coucou,
    Je me permets de répondre, comme j'ai eu le même soucis, en fait c'est parce que je n'allais pas dans le HTML avancé, ce qui causait donc des déformations dans le code. Du coup, si tu cliques sur les trois petits écrous au lieu de celui seul, ton codage devrait se remettre tout seul Wink !
    En espérant t'avoir aidé !

    Bonjour CaraDelevngnie,

    Même en passant par les trois écrous, mon problème persiste.
    Je ne sais pas pourquoi.

    Bàv,
    avatar
    Onyx
    FémininAge : 23Messages : 3047

    le Dim 3 Sep 2017 - 8:09

    Pour les problèmes avec l'utilisation d'un LS/Tutoriel, merci d'aller dans la section appropriée :
    http://www.never-utopia.com/f177-probleme-avec-mon-code



    avatar
    Deamyx
    MasculinAge : 21Messages : 200

    le Lun 11 Sep 2017 - 16:41

    Merci beaucoup !
    avatar
    Onyx
    FémininAge : 23Messages : 3047

    le Mar 19 Sep 2017 - 3:24

    Salut!

    Le LS est enfin disponible avec un rendu assez différent puisqu'il était trop semblable à un bestiaire déjà existant. Enjoy ^^

    Face > N'oublies pas qu'après avoir créé une nouvelle catégorie/sous-catégorie, tu dois aussi aller créer le contenu un peu plus loin après les animaux/plantes. Ton problème vient probablement principalement de là.



    avatar
    Kelalin
    FémininAge : 25Messages : 1703

    le Mar 19 Sep 2017 - 17:35

    Merci pour le partage !
    Contenu sponsorisé


      La date/heure actuelle est Sam 18 Nov 2017 - 18:39