[DOM] Gérer l'événement onMouseOver sur une image créée avec DOM

**sab_etudianteBTS** · 20/02/2008, 10h12

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 20/02/2008, 10h19

la solution se trouve dans la faq

http://javascript.developpez.com/faq...lick.dynamique

**sab_etudianteBTS** · 20/02/2008, 10h40

Merci bcp, décidément je ne suis pas douée en recherche!!
Encore merci!!

**sab_etudianteBTS** · 20/02/2008, 10h44

Euh désolée, mais j'ai encore une question, sui va surement te paraitre bete mais bon

j'ai ma variable texte2 qui contient du texte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
var texte2=document.createTextNode("La tour de couleur NOIR");

Comment puis je faire pour reprendre cette variable la et lui affecter un autre texte, en écrasant le texte précédent.

(comme tu as pu le remarquer, je suis novice en javascript, je débute...)

**SpaceFrog** · 20/02/2008, 10h51

passse plutot par l' innerHTML pout attribuer le contenu ...

**SpaceFrog** · 20/02/2008, 10h57

je te conseille aussi de remplacer cette syntaxe :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

pion.setAttribute("src", "images/image2.png");

.

par celle-ci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

pion.src= "images/image2.png";

pour tous les attributs ...

**sab_etudianteBTS** · 20/02/2008, 11h03

Ok, je te remercie!

Par contre, le innerHTML ne fonctionne pas pour la "legende" de mon fieldset. Est-ce normal?? (ca n'affiche pas le texte)

**SpaceFrog** · 20/02/2008, 11h33

Non ce n'est pas normal ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<form>
<fieldset>
<legend id='leg'>coucou</legend>
</form>
<script type='text/javascript'>
document.getElementById('leg').innerHTML='hello'
</script>
 
 
</body>

**sab_etudianteBTS** · 20/02/2008, 11h53

Euh voila ce que j'ai fait:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
var monForm = document.createElement("form");  
var monFieldset = document.createElement("fieldset");  
var maLegend = document.createElement("legend"); 
maLegend.id="legend";
 
document.getElementById('legend').innerHTML = " Vous avez sélectionné ";
 
monFieldset.appendChild(maLegend);
 
monForm.appendChild(monFieldset);  
body.appendChild(monForm);

Peut tu me dire ou est le probleme stp?

Merci

**SpaceFrog** · 20/02/2008, 11h58

le problème est tout simple et très logique ...

d'abord tu instancie ton objet

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var maLegend = document.createElement("legend"); 
maLegend.id="legend";

et juste après tu fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('legend').innerHTML = " Vous avez sélectionné ";

mais à ce moment là tu ne l'as pas encore appendé au body ...
donc il ne fait pas partie du document ....

tu as deux possibilités, soit tu l'appendes d'abord, et ensuite le reste de ton code sera bon.
soit plus simplement:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var maLegend = document.createElement("legend"); 
maLegend.id="legend";
maLegen.innerHTML=" Vous avez sélectionné ";

et seulement après tu l'appendes...

**sab_etudianteBTS** · 20/02/2008, 12h06

Ok, j'ai compris et ca fonctionne!!
Je te remercie d'avoir pris de ton temps pour m'aider, c'est vraiment gentil de ta part!

[DOM] Gérer l'événement onMouseOver sur une image créée avec DOM

JavaScript

Discussions similaires

Partager

Partager