Créer une arborescence (style arbe de talent)

bpdesign a écrit :
Je pense que la majeure partie est en HTML / CSS

La majeure partie sera plutôt programmatique, donc beaucoup de JavaScript.

Pour la structure HTML, l'arbre de talent que tu donnes en exemple n'est pas clairement structuré. Je n'ai aucune idée des relations entre les éléments (un coup il y a des flèches, le plus souvent non), de ce que signifient les lignes et les colonnes (si ce sont des lignes et des colonnes et pas juste un placement arbitraire).

Si tu as un schéma et une description précise de ce que tu veux obtenir, on pourra peut-être t'en dire plus. Ceci dit, il est probable que la sémantique HTML ne permette pas de décrire les relations entre tes différents éléments.

OK je vous concocte ça pour illustrer un arbre de talent de base que j'aimerai réaliser.

Bon.

Si on voulait coder cette information de manière accessible en HTML, la solution serait de faire un tableau avec pour colonnes:
- Nom du talent,
- Rang,
- Cout,
- Pré-requis (nom du ou des talents nécessaires, le cas échéant).

Maintenant, j'imagine que pour un jeu de ce genre l'accessibilité ne fait pas partie du cahier des charges. Donc on réalisera cette interface personnalisée de la manière qu'on veut, avec les technos disponibles. Parmi les choses disponibles:
- Flash;
- Image Map (une bonne vieille image avec des zones cliquables, associées à des fonctions JS);
- Série d'éléments DIV (ou listes UL ou éléments A ou autre), mis en forme en CSS;
- SVG;
- Canvas.

Il y a un peu l'embarras du choix.
Pour une solution à base de code HTML «simple», tu peux sans doute partir d'une structure qui ressemble à:

<div id="talents">
  <div class="rank-row" id="rank1">
    <h2><abbr title="Rank 1">R1</abbr></h2>
    <ul>
      <li id="talent25">
        <a class="icon available" href="/talents/get/25"><img alt="Danse contact (apprendre)" src="/img/talents/25a.png"></a>
        <abbr class="cost" title="2 points">2</abbr>
      </li>
      <li id="talent71">
        <span class="icon done"><img alt="Marche funèbre (acquis)" src="/img/talents/71b.png"></span>
      </li>
    </ul>
  </div><!--#rank1-->
  <div class="rank-row" id="rank2"></div><!--#rank2-->
  ...
  <div class="rank-row" id="rank6"></div><!--#rank6-->
</div><!--#talents-->

Ce n'est qu'une piste parmi d'autres possibles. Et bien sûr tout dépend de comment est conçue ton interface.

Pour les liens de parenté, tu peux les dessiner avec des éléments de décoration ou des images de fond. Tu peux ensuite répéter l'information en texte dans le texte alternatif (et/ou texte au survol, tooltip, etc.) pour un talent donné: <span class="icon disabled"><img src="/img/talents/64c.png" alt="Bulles avec le nez (requiert Pitrerie Démoniaque)"></span>.

Ouah! Quelle réponse! Merci beaucoup pour ton implication, je me penche dessus dès demain soir! Encore merci!