Tutoriel N° 73
Creation damier echec 8x8 en div html
Ce tutoriel vous explique comment réaliser un damier d'echec 8x8 avec des cases de 40x40 pixels.
Nous remplirons ce damier avec une piece de 40x40 superposée sur le damier.
Voila le résultat que nous obtiendrons:
Voici le damier vierge sans pièce superposée:
Voici le cavalier:
Explication:
Nous créeons un 1er div avec le damier en fond d'ecran en position relative 100 à gauche et à 100 de top.
Ensuite en position absolute nous encapsulons les divs de chaque piece.
Voici le code html avec les div:
<div id="casea1b1" style="position:relative;left:100;top:100;width:320px;height:320px;background-image:url(damier.png);">
<!-- ligne 1 de 8 pieces -->
<div id="exemple" style="position:absolute;left:0;top:0"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:40;top:0"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:80;top:0"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:120;top:0"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:160;top:0"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:200;top:0"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:240;top:0"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:280;top:0"><img src="cav.gif" width="40" height="40"></div>
<!-- ligne 1 de 8 pieces -->
<!-- ligne 2 de 8 pieces -->
<div id="piececasea1b1" style="position:absolute;left:0;top:40"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:40;top:40"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:80;top:40"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:120;top:40"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:160;top:40"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:200;top:40"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:240;top:40"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:280;top:40"><img src="cav.gif" width="40" height="40"></div>
<!-- ligne 2 de 8 pieces -->
<!-- ligne 3 de 8 pieces -->
<div id="piececasea1b1" style="position:absolute;left:0;top:80"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:40;top:80"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:80;top:80"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:120;top:80"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:160;top:80"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:200;top:80"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:240;top:80"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:280;top:80"><img src="cav.gif" width="40" height="40"></div>
<!-- ligne 3 de 8 pieces -->
<!-- ligne 4 de 8 pieces -->
<div id="piececasea1b1" style="position:absolute;left:0;top:120"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:40;top:120"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:80;top:120"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:120;top:120"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:160;top:120"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:200;top:120"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:240;top:120"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:280;top:120"><img src="cav.gif" width="40" height="40"></div>
<!-- ligne 4 de 8 pieces -->
<!-- ligne 5 de 8 pieces -->
<div id="piececasea1b1" style="position:absolute;left:0;top:160"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:40;top:160"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:80;top:160"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:120;top:160"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:160;top:160"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:200;top:160"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:240;top:160"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:280;top:160"><img src="cav.gif" width="40" height="40"></div>
<!-- ligne 5 de 8 pieces -->
<!-- ligne 6 de 8 pieces -->
<div id="piececasea1b1" style="position:absolute;left:0;top:200"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:40;top:200"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:80;top:200"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:120;top:200"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:160;top:200"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:200;top:200"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:240;top:200"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:280;top:200"><img src="cav.gif" width="40" height="40"></div>
<!-- ligne 6 de 8 pieces -->
<!-- ligne 7 de 8 pieces -->
<div id="piececasea1b1" style="position:absolute;left:0;top:240"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:40;top:240"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:80;top:240"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:120;top:240"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:160;top:240"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:200;top:240"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:240;top:240"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:280;top:240"><img src="cav.gif" width="40" height="40"></div>
<!-- ligne 7 de 8 pieces -->
<!-- ligne 8 de 8 pieces -->
<div id="piececasea1b1" style="position:absolute;left:0;top:280"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:40;top:280"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:80;top:280"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:120;top:280"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:160;top:280"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:200;top:280"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:240;top:280"><img src="cav.gif" width="40" height="40"></div>
<div id="piececasea1b1" style="position:absolute;left:280;top:280"><img src="cav.gif" width="40" height="40"></div>
<!-- ligne 8 de 8 pieces -->
</div>
