[DOM] Gérer l'événement onMouseOver sur une image créée avec DOM
Bonjour,
Voila, j'ai crée un tableau grace a des boucles, et dans chaque cellules, j'y insère une image. Je voudrais que lorsqu'on survole une image, un texte s'affiche dans le fieldset que j'ai ajouté juste en dessous de mon tableau. Je ne sais pas du tout comment m'y prendre, j'ai testé plusieurs solutions, mais sans succès...
Code:
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);
} |
Voila, je sais pas si j'ai été assez claire.
Je vous remercie pour votre aide
