1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107
|
function afficheTableau()
{
//On récupère une référence vers l'élément body
var body = document.getElementsByTagName("body")[0];
/******************************************
Création du tableau
******************************************/
// création de l'élément <table>
var monTableau= document.createElement("table");
// création des cellules
for(var i=1; i<=8; i++) //Boucle qui va créer 8 lignes
{
// création d'un élément <tr>
var ligne = document.createElement("tr");
for (var j=1; j<=8; j++) //Boucle qui va créer 8 colonnes pour chaque ligne
{
// création d'un élément <td>
var colonne = document.createElement("td");
//On insère les images dans les cellules du tableau (seulement pour les lignes 1, 2)
var pion = document.createElement("img");
if (i==1) //Ligne 1
{
if (j==1 || j==8) //Pour les cellules 1 et 8 de la ligne 1
{
pion.setAttribute("src", "images/image1.png");
pion.setAttribute("alt", i + "," + j);
}
if (j==2 || j==7) //Pour les cellules 2 et 7 de la ligne 1
{
pion.setAttribute("src", "images/image2.png");
pion.setAttribute("alt", i + "," + j);
}
if (j==3 || j== 6) //Pour les cellules 3 et 6 de la ligne 1
{
pion.setAttribute("src", "images/image3.png");
pion.setAttribute("alt", i + "," + j);
}
if (j==4) //Pour la cellule 4 de la ligne 1
{
pion.setAttribute("src", "images/image4.png");
pion.setAttribute("alt", i + "," + j);
}
if (j==5) //Pour la cellule 5 de la ligne 1
{
pion.setAttribute("src", "images/image5.png");
pion.setAttribute("alt", i + "," + j);
}
}
if (i==2) //Ligne 2
{
pion.setAttribute("src", "images/image6.png");
pion.setAttribute("alt", i + "," + j);
}
pion.className="pion";
colonne.appendChild(pion);
// ajoute la cellule <td> à la ligne <tr>
ligne.appendChild(colonne);
} //Fin de la boucle
// ajoute la ligne <tr> à l'élément <table>
monTableau.appendChild(ligne);
} //Fin de la boucle
// ajoute <table> à l'élément <body>
body.appendChild(monTableau);
/******************************************
Création du Formulaire => Filedset
******************************************/
// création de l'élément <form>
var monForm = document.createElement("form");
// création de l'élément fieldset
var monFieldset = document.createElement("fieldset");
// création de l'élément legend
var maLegend = document.createElement("legend");
// création d'un noeud texte
var texte = document.createTextNode(" Vous avez survolé ");
// ajoute le nud texte créé à l'élément <legend>
maLegend.appendChild(texte);
// ajoute la legend créé à l'élément <fildset>
monFieldset.appendChild(maLegend);
var texte2=document.createTextNode("Rien pour l'instant...");
// ajoute le nud texte créé à la cellule <td>
monFieldset.appendChild(texte2);
monFieldset.id = "fieldset";
// ajoute le fieldset créé à l'élément <form>
monForm.appendChild(monFieldset);
// ajoute <form> à l'élément body
body.appendChild(monForm);
} |
Partager