Technique HTML appropriée pour créer un formulaire web à partir d'une image

Question

Je prévois de créer une carte de score de golf interactive pour mon site Web (XHTML). (En passant, voici à quoi ressemble une telle carte de score : Carte de score ). À la fin, on devrait pouvoir insérer un score pour chaque trou dans le champ de saisie approprié de la carte de score virtuelle sur le site web. Pour moi, il est très important que la carte de score interactive ait vraiment le même aspect que la carte de score originale (papier) et ma première approche a donc été de scanner et de découper l'image de la carte de score pour obtenir cet aspect.

Vous pouvez voir ici la façon dont j'ai découpé l'image :

L'idée était d'insérer une entrée de texte HTML pour chaque champ de score, pour aboutir à quelque chose comme ceci :

Après avoir découpé l'image, je l'ai reconstruite en utilisant le HTML . Pour ce faire, j'ai mis les tranches d'image comme arrière-plan de la cellule.

<table>
  <tr>
    <td style="background: url("slice1.jpg") width="58px" height="25px">
      <input type="text"></inputText>
    </td>
  </tr>
  ...
</table>

Au début, cela a bien fonctionné (car Gimp offre une fonctionnalité intéressante pour cela). Ensuite, le problème était que je devais créer une table HTML pour créer la mise en page exacte. Comme vous pouvez le voir, la partie inférieure de la mise en page est divisée en 3 colonnes. La colonne du milieu est divisée en plusieurs rangées (pour chaque trou). Les colonnes de gauche et de droite doivent donc être réparties sur ces rangées. Finalement, cela a fonctionné, mais cela a entraîné un problème de mise à l'échelle. Si je fais un zoom avant ou arrière sur le tableau, la colonne du milieu (et seulement celle-ci) n'est pas mise à l'échelle correctement. Je ne parviens pas à résoudre ce problème, et je commence à douter que cette technique soit la bonne pour la virtualisation d'images html. Je ne suis vraiment pas un spécialiste de la création de sites Web, et j'apprécierais donc toute aide à ce sujet. Peut-être existe-t-il une toute autre et meilleure technique pour faire cela, car je pense que c'est un travail courant dans la création de sites web. Je n'ai pas trouvé d'exemples ou de didacticiels intéressants à ce sujet.

Answer 1

Si je n'ai rien oublié, il n'est pas nécessaire d'utiliser des tranches d'images, ou des images tout court, pour obtenir cet effet. Tout cela peut être fait en CSS simple.

Voici un exemple approximatif de la façon dont cela pourrait être réalisé :

http://jsfiddle.net/Curt/wxFtJ/

Answer 2

Vous avez maintenant un tableau avec une ligne et une grande cellule avec une image de fond. Voulez-vous dire que vous voulez que votre tableau HTML ressemble à ceci :

<table>
<tr>
<td colspan="3">One row</td>
</tr>
<tr>
<td colspan="3">One row</td>
</tr>
<tr>
<td colspan="3">One row</td>
</tr>
<tr>
<td colspan="3">One row</td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</table>

Veuillez vous renseigner sur le style des tableaux HTML de base : http://www.w3.org/TR/CSS2/tables.html

De plus, vous ne devriez vraiment pas découper une image pour créer un tableau.