commande script liste des joueurs (terminée)

**Invité**Invité

hello je découvre cette section, et avec les merveilleuses mains de bazzart je ne doute pas que quelqu'un voudra bien m'aider avec cette commande.
(j'ai mis script dans les titres de commande mais je suis une buse en codage je pense que c'est ça (une page html ou javascript) mais n'hésitez pas à me dire si je fais fausse route

)

Commande de script

Type de code : Ce serait un code pour une page tierce incorporée dans le forum, donnant lieu à une liste des personnages en jeu.
Maquette : https://i.imgur.com/tr5xxQs.png voici la maquette, vous pouvez aussi l'utiliser comme fond et coder dessus si vous le souhaitez I love you

Précisions : En bas du rectangle blanc à droite, j'apprécierais qu'une zone de texte soit ajoutée, afin de donner le nom du personnage et quelques unes de ses caractéristiques !
Dans chacun des carrés de gauche il y aura une image, j'apprécierais un redimensionnement automatique, de même pour le rectangle à droite, ce serait vraiment chouette commande script liste des joueurs (terminée) 4250834230

commande script liste des joueurs (terminée) 4250834230

Liens à apporter : Pour le fond graphique si vous le souhaitez vous pouvez utiliser la maquette, elle fera l'affaire I love you

Pour le reste je n'ai pas trop d'exigence, l'ambiance du forum est horrifique donc si vous n'utilisez pas le fond graphique évitez de faire un rendu maxi coloré svp Razz

Lien où sera posé le code :

merci d'avance et n'hésitez pas à me @ si j'ai dit des bêtises Laughing

INSCRIPTION : 05/02/2013

Salut

sans m'engager sur cette commande j'aurais quelques questions :

Tu cherches une page "statique" (que tu éditeras toi-même pour lui ajouter des informations) ou "dynamique" (qui va automatiquement chercher les informations ailleurs) ? Le rôle du javascript sera bien sûr nettement plus limité dans le premier cas (et la charge de travail pour le codeur aussi)
Y a-t-il des dimensions minimum ou maximum à respecter pour cette page HTML ? (sur FA il y a possibilité d'inclure l'en-tête de ton forum sur la page HTML pour avoir accès au menu etc, est-ce que c'est quelque chose que tu prévois de faire ?)
De quelle façon souhaites-tu qu'on modifie les informations à droite ? Je suggère que ce soit au clic du portrait (c'est le plus ergonomique), mais si tu as d'autres envies/besoins il faut le dire maintenant
Imaginons qu'un jour le forum compte 82 patients et 35 membres du personnel. J'imagine que tu veux que le cadre de droite reste fixe sur l'écran, pour éviter les scrolls inutiles chaque fois que tu veux afficher un autre personnage ?
Si je te fais le squelette général, es-tu bien capable de t'occuper du choix des couleurs et des polices dans le CSS ?

Mon engagement ou non dépendra des réponses, mais de toute façon ces informations aideront tout codeur qui voudra te venir en aide Smile

**Invité**Invité

merci pour ces questions !!
1/ une page statique conviendra mieux !!
2/ je ne prévois pas d’ajouter le header dessus ! quand aux dimensions ce qui serait le mieux serait une page a des dimensions automatiques pour un onglet plein, qui puisse s’adapter ou être au minimum convenable à la vue sur n’importe quelle taille d’écran d’ordinateur.
3/en gros le cadre a droite diffuserait l’avatar d’un personnage et ses différentes informations, qui seraient éditées dans le code et donc modifiable I love you

4/ le code servira à un forum avec que des personnages prédéfinis: donc le nombre de 18 personnages sera fixe!!
5/ oui sans souci en soi! si tout est bien indiqué quand aux différentes parties à colorer je m’en chargerais sans souci!

merci de toutes ces questions en tout cas I love you

INSCRIPTION : 05/02/2013

Ok, ce sera donc relativement simple à faire Smile

enfin sauf ce point-là :

.CHARLES a écrit:: 3/en gros le cadre a droite diffuserait l’avatar d’un personnage et ses différentes informations, qui seraient éditées dans le code et donc modifiable

Soit tu as mal compris ma question, soit j'ai très mal compris ta demande xD alors j'expose ce que j'ai cru comprendre : ce cadre de droite affiche des informations supplémentaires concernant un personnage donné. Je te demandais du coup de quelle façon tu voulais qu'on sélectionne le personnage à afficher (et je suggérais un clic sur le portrait carré à gauche). Si c'est à cette sélection que tu pensais en disant "éditées dans le code et donc modifiable" c'est parfait, sinon il va falloir être plus explicite What a Face

dans l'idée telle que je la comprends toutes les informations se trouveront sur la page mais seul le personnage sélectionné sera affiché.

**Invité**Invité

Ahhhhh oui on s’était mal compris commande script liste des joueurs (terminée) 623269

Mais effectivement c’est bien par la sélection d’un personnage sur les carrés à gauche !!

INSCRIPTION : 05/02/2013

Ok

je tente un premier jet dans la journée, ça devrait le faire.

Edit. Si tu as le temps je t'invite déjà à chercher une font qui te convient pour les titres sur ce lien : https://fonts.google.com/

**Invité**Invité

c’est super gentil merci infiniment I love you

Les polices Permanent Marker ou encore Monoton semblent être dans le thème !!!

INSCRIPTION : 05/02/2013

Juste à temps ! je venais de finir mon essai :

Code:: <head>
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<style>
   body {
      background-color: black;
      color: white;
      margin: 0;
   }
   img {
      object-fit: cover;
      border: 3px solid white;
   }
   p {
      padding: 10px;
   }
   h1 {
      text-align: center;
      font-family: 'Permanent Marker', cursive;
   }
   .chara-list {
      width: 100%;
      padding-top: 20px;
   }
   .chara-list img {
      width: 100px;
      height: 100px;
      margin: 5px;
   }
   .chara-details {
      width: 300px;
      height: 100%;
      float: right;
      border-left: 20px solid white;
   }
   .chara-details > div {
      display: none;
   }
   .chara-details .displayed {
      display: block;
   }
   .chara-details .header {
      text-align: center;
      margin-top: 20px;
   }
   .chara-details .header img {
      width: 200px;
      height: 320px;
   }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
   $(document).ready(function() {
      $(".chara-list img").on("click", function() {
         $(".chara-details .displayed").removeClass("displayed");
         $("#" + $(this).attr("id") + "-details").addClass("displayed");
      });
   });
</script>
</head>
<div class="chara-details">
<div id="johndoe-details">
   <div class="header">
      <img src="https://www.talenteo.fr/app/uploads/2013/05/badass-quotes-by-dr-house-980x457-1486740267_1400x653-1600x692.jpg"/>
   </div>
   <h1>John Doe</h1>
   <p>
      Voici John Doe.
   </p>
</div>
<div id="janedoe-details">
   <div class="header">
      <img src="https://img.bfmtv.com/c/1256/708/4d0410f65/77720fe35877bf64bfbf52f.jpeg"/>
   </div>
   <h1>Jane Doe</h1>
   <p>
      Voici Jane Doe.
   </p>
</div>
</div>
<div class="chara-list">
<h1>Catégorie 1</h1>
<img id="janedoe" title="Jane Doe" alt="Jane Doe" src="https://img.bfmtv.com/c/1256/708/4d0410f65/77720fe35877bf64bfbf52f.jpeg"/>
<h1>Catégorie 2</h1>
<img id="johndoe" title="John Doe" alt="John Doe" src="https://www.talenteo.fr/app/uploads/2013/05/badass-quotes-by-dr-house-980x457-1486740267_1400x653-1600x692.jpg"/>
</div>

Mode d'emploi pour ajouter un personnage :

Ajouter une balise image dans chara-list avec l'id de ton choix.

Code:

<img id="MON_ID" title="TEXTE_AU_SURVOL" alt="TEXTE_ALTERNATIF_SI_ÉCHEC_CHARGEMENT" src="MON_URL"/>
Ajouter sous chara-details un bloc avec pour id l'id de que tu as donné à ton image + "-details".

Code:

<div id="MON_ID-details">
   <div class="header">
      <img src="MON_URL"/>
   </div>
   <h1>UN_TITRE_ÉVENTUEL</h1>
   <p>
      MON_TEXTE
   </p>
</div>

Il y a deux exemples avec Jane Doe et John Doe, désolé pour les références foireuses niveau image c'était pour tester le redimensionnement Smile

les images de la liste qui ne sont pas séparées par un titre (h1) s'aligneront toutes seules comme dans ta maquette, même si tu les sépares par des retours à la ligne.

Tu constateras que le css et le javascript sont compris dans le html. C'est parce que j'ai vu que quand la page html n'inclut pas le header du forum, aucune ressource interne n'est chargée. Cela fonctionne toutefois très bien en l'intégrant de cette façon (j'ai testé sur un vieux forum-test pour m'en assurer).

Je te laisse un peu jouer avec le bébé, il est ouvert à toute question et demande de révision ^-^

**Invité**Invité

Omg je viens de voir et de tester et je te suis infiniment reconnaissant. C'est juste incroyable, j'adore I love you

Merci beaucoup. Je passe la commande en terminée.

INSCRIPTION : 05/02/2013

Très heureuse que ça te plaise commande script liste des joueurs (terminée) 4250834230

je me suis encore bien amusée dessus ha ha.

**Contenu sponsorisé**

» Commande d'une PA (Terminée)
» Commande de Qui est en ligne (terminée)
» Commande de Catégories (terminée)
» Commande de Catégories (terminée)
» Commande d'un QUEEL (Terminée)

commande script liste des joueurs (terminée)

commande script liste des joueurs (terminée)

Sujets similaires

Sujets similaires