home/Comment-adapter-une-application-web-pour-l’intégrer-à-OpenBoard-?/Ajouter-une-fenêtre-d'informations.md

@@ -8,16 +8,26 @@ Pour ajouter une fenêtre d'informations, il faut :
 Le HTML est la partie structurelle de l'application.
 Elle se trouve généralement dans index.html.
 #### On place le bouton d'ouverture
-`<button id="bouton-aide" onclick="ouvre(divAide)"></button>`
-
+##### Bouton sans texte
+`<button id="bouton-aide" onclick="ouvre(divAide)"></button>
+(nécessite alors une image)
+ou
+##### Bouton à texte
+`<button id="bouton-aide" onclick="ouvre(divAide)">Aide</button>`
+
+##### Où placer ce bouton ?
 Soit à l'intérieur d'une "div" existante (contenant déjà d'autres boutons, par exemple), soit juste avant la balise fermant le "body" en fin de document, si l'on préfère un placement indépendant (absolu).
 
 ### On place éventuellement la darkbox
 
 `<div id="darkbox" class="hide"></div>`
 
+Elle sera forcémenent en position absolue, donc on va la placer juste avant la balise fermant le "body", en fin de document.
+
 On lui donne la classe "hide" (on déclarera plus loin que hide = masqué).
+
 ### On place la lightbox
+
 On lui affecte également une classe "hide" comme la darkbox.
 
 L'exmple ci-dessous est structuré pour présenter :
@@ -50,6 +60,7 @@ Les éléments de liste sont entre balises "li"
         <p>Ceci est un paragraphe <strong>avec des mots en gras</trong>.</p>       
 </div>
 ```
+Elle sera forcémenent en position absolue, donc on va placer ce code juste avant la balise fermant le "body", en fin de document (après la darkbox).
 
 ## Dans le javascript
 Le javascript est la partie algorithmique de l'application, elle se trouve dans un fichier à l'extension js (souvent script.js ou main.js). Son but est d'effectuer des modifications dynamiques du HTML.
@@ -90,17 +101,29 @@ Vous pouvez adapter les règles d'affichage selon vos besoins.
 
 ```
 #bouton-aide {
-  position: fixed; /* permet que la position ne soit pas affectée par le scroll de la page */
+ /* La propriété fixed permet que la position ne soit pas affectée par le scroll de la page, à supprimer si le bouton est intégré dans un bloc existant */
+  position: fixed;
   z-index: 100; /* Pour être à peu près sûr de passer au premier plan */
-  /* Les dimensions; la position, l'apparrence ...  */
+
+
+  /* La position (ne pas utiliser en cas de positionnement inline */
+
   bottom: 20px;
   right: 20px;
+
+  /* Les dimensions (ne pas utiliser si le bouton contient du texte et qu'on veut qu'il s'adapte automatiquemnnt)*/
   width: 80px;
   height: 80px;
+
+  padding: 10px; /* marge intérieure de 10px, utile en cas de bouton à texte uniquement */
+
+  /* Gestion de l'image de fond du bouton */
   background-image: url(images/question.svg);
   background-position: center;
   background-repeat: no-repeat;
   background-size: 90%;
+
+ /* Coins arrondis  */
   border-radius: 10px;
 }