Bonsoir,
Afin de faire profiter à tout le monde de fenêtre de dialogues pour ceux qui le désirent, je vous fourni mon code ci-dessous et vous explique l'utilité de chaque partie.
Le but étant de pouvoir s'exprimer dans une fenêtre. Voici le résultat que l'on obtient :
[Vous devez être inscrit et connecté pour voir cette image] | -"Salut Hakai ! Tu as entendu les dernières nouvelles ?" | |
| | -"Ouais, il paraît que l'on peut maintenant s'exprimer dans des fenêtres de dialogue." | [Vous devez être inscrit et connecté pour voir cette image] |
Entrons à présent dans le vif du sujet, le code.
Voici le code pour une fenêtre avec l'interlocuteur à sa gauche :
- Code:
-
<table border="0" cellpadding="5"><tbody><tr><td><img src="Votre image en taille 100*75 pixels"></td><td bgcolor="#ffffff">-"Votre texte."</td><td width="60"></td></tr></tbody></table>
Et voici celui pour une fenêtre de dialogue avec interlocuteur à sa droite :
- Code:
-
<div align="right"><table border="0" cellpadding="5"><tbody><tr><td><img src="Votre image en taille 100*75 pixels"></td><td bgcolor="#ffffff">-"Votre texte."</td><td width="60"></td></tr></tbody></table></div>
Enfin, voici ce que j'ai compris du code et ce que j'ai pu retirer d'un tutoriel d'un ancien rpgiste :
- Code:
-
<div align="right"> et </div>
permettent de placer votre image à la droite du tableau et de la colonne comprenant votre texte.
- Code:
-
<table border="0">
détermine la largeur de la bordure du cadre, c'est pourquoi ici on le voit pas.
- Code:
-
<tr> et </tr>
signalent les débuts et fins d'une première ligne dans le tableau.
- Code:
-
<td> et </td>
signalent le début et la fin d'une première colonne dans le tableau. On place ici notre image dans la 1ère colonne dans le cas où elle est à gauche. Le texte est dans une seconde colonne.
- Code:
-
<td bgcolor="#ffffff">
détermine la couleur de l'arrière plan de la seconde colonne contenant le texte.
- Code:
-
<td width="60">
créé une marge de 60 pixels sur la droite du tableau.
- Code:
-
<img src="URL DE L'IMAGE DU PERSONNAGE">
Vous devez, dans cette section, placer le lien de votre image (de préférence dans les dimensions suivantes 75*100 pixels).
Enfin dans la section "Texte", vous insérerez votre texte.
Afin de rendre votre texte agréable à lire, n'hésitez pas à y ajouter de la couleur et à modifier sa police pour personnaliser votre fenêtre de dialogue.
J'espère que ce tuto, vous a été utile et agréable.
A bientôt sur le tchat ou inrp.
P.S. : Je précise que l'image utilisée pour le pnj ne m'appartient pas, je l'ai empruntée pour cet exemple. Et mes explications sont tirées d'un tutoriel sur un ancien forum fermé.