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://i.imgur.com/SqXjFPo.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://i.imgur.com/lGDeQnZ.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://i.imgur.com/7o3NfUu.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://i.imgur.com/ftCwlW2.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.
), 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
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
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 Jeu 29 Nov 2018 - 0:59, édité 15 fois
absolument génial !!!! Merci 
