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 nœud 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 nœud 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);
} |
[DOM] Gérer l'événement onMouseOver sur une image créée avec DOM
Répondre avec citation
Partager