Le code html du corps de la page est composé :
d’un premier bloc qui contient trois tableaux (un pour les déplacements, un pour la taille et enfin un pour la vitesse) ,
d’un second qui sera l’emplacement dans lequel l’image pourra se mouvoir.
Les identifiants des balises serviront :
d’une part pour le style,
d’autre part pour identifier et manipuler avec javascript, les objets correspondants.
Un des intérêts de cet exemple, est de montrer que l’ on peut très simplement modifier la position et la taille d’un élément.
<body >
<div id="conteneur0">
<table id="tableaucontrole" >
<tr>
<td>
<div id="un"></div>
</td>
<td>
<div id="trois"></div>
</td>
</tr>
<tr>
<td>
<div id="quatre" ></div>
</td>
<td>
<div id="six"></div>
</td>
</tr>
<tr>
<td>
<div id="sept"></div>
</td>
<td>
<div id="neuf" ></div>
</td>
</tr>
</table>
<table id="tableautaille">
<tr>
<td>
<div id="deux"></div>
</td>
</tr>
<tr>
<td>
<div id="huit" ></div>
</td>
</tr>
</table>
<table id="tableauvitesse">
<tr>
<td>
<div id="tdvitesse1"></div>
</td>
<td>
<div id="tdvitesse2" ></div>
</td>
<td>
<div id="tdvitesse3"></div>
</td>
<td>
<div id="tdvitesse4" ></div>
</td>
</tr>
</table>
</div>
<div id="conteneur">
<img id="image" src="aristo0.jpg" style="top:125px ; left:125px ; width:100px ; height:100px ; position:relative ;" alt=""/>
</div>
</body>