Boucle for et fonction [Résolu]

[helkøwsky]

Bonjour,

j'ai un soucis avec mon code et je me demande si cela ne vient pas de l'attribution dans une fonction d'une variable issue de la boucle for voici mon code :

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
 
		for(i=1;i<=3;i++)
		{
			if(document.getElementById(i)!=null)
			{
				map_bouton[i] = document.getElementById(i);
				map_appear[i] = document.getElementById(i+'b');
				addEventSimple(map_bouton[i], 'mouseover', function()
				{
					map_appear[i].style.zIndex = '90';
					text_affichage = '&nbspChancy';
					text_affichage_prix = '<span style="color:red;">&nbspZone non delivrée</span>';
					zone_affichage.innerHTML = text_affichage;
					zone_affichage_prix.innerHTML = text_affichage_prix;
				}
				);
				addEventSimple(map_bouton[i], 'mouseout', function()
				{
					map_appear[i].style.zIndex = '70';
					text_affichage = '&nbsp-';
					text_affichage_prix = '&nbsp-';
					zone_affichage.innerHTML = text_affichage;
					zone_affichage_prix.innerHTML = text_affichage;
				}
				);
			}
		}

Quand je test avec firebug il me dit :
"map_appear[i] is undefined"
et c'est justement celui que j'ai mis dans la fonction.

voici le html si toutefois:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
				<Map name="carte_gva">
				<area id="1" shape="poly" coords="10,422,10,415,26,401,23,388,38,356,53,357,70,334,79,332,103,345,72,365,60,369,50,384,48,401,38,413,31,414,24,419,15,417,10,422" >
				<area id="2" shape="poly" coords="39,356,51,325,54,331,59,331,63,320,68,317,82,321,92,318,101,328,106,343,102,345,80,331,71,332,52,355,39,356">
				<area id="3" shape="poly" coords="51,388,56,373,65,369,73,366,106,346,105,355,101,367,112,368,120,375,109,393,97,390,75,390,66,386,51,388">
				</Map>
				<img id="map_gva" src="image/geneve/carte_gva.png" usemap="#carte_gva" style="position:absolute; top:0px; left:0px; z-index:95; ">
 
 
				<img id="1a" src="image/geneve/chancy.png" style="position:absolute;  left:11px; top:333px; z-index:80;">
				<img id="1b" src="image/geneve/chancy_hover.png" style="position:absolute;  left:11px; top:333px; z-index:70;">	
 
				<img id="2a" src="image/geneve/avully.png" style="position:absolute;  left:41px; top:317px; z-index:80;">
				<img id="2b" src="image/geneve/avully_hover.png" style="position:absolute;  left:41px; top:317px; z-index:70;">
 
				<img id="3a" src="image/geneve/avusy.png" style="position:absolute;  left:51px; top:346px; z-index:80;">
				<img id="3b" src="image/geneve/avusy_hover.png" style="position:absolute;  left:51px; top:346px; z-index:70;">

merci d'avance à ceux qui prendront le temps de répondre.

[NoSmoking]

Bonjour,
un grand classique de chez classique, une solution ce trouve dans
http://javascript.developpez.com/faq...lick.dynamique

[helkøwsky]

hello,

merci de ta réponse rapide j'ai donc un code qui fonctionne :

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
 
		if(document.getElementById('map_gva')!=null)
		{	
			var map = document.getElementById('map_gva');
			var zone_affichage = document.getElementById('lvr_zone');
			var zone_affichage_prix = document.getElementById('lvr_zone_prix');
			var map_bouton = [];
			var map_appear = [];
		//chancy
		for(i=1;i<=3;i++)
		{
			if(document.getElementById(i)!=null)
			{
				map_bouton[i] = document.getElementById(i);
				map_appear[i] = document.getElementById(i+'b');
				map_bouton[i].indice = i;
				map_bouton[i].addEventListener('mouseover', function()
				{
					i = this.indice;
					map_appear[i].style.zIndex = '90';
					text_affichage = '&nbspChancy';
					text_affichage_prix = '<span style="color:red;">&nbspZone non delivrée</span>';
					zone_affichage.innerHTML = text_affichage;
					zone_affichage_prix.innerHTML = text_affichage_prix;
				}
				);
				map_bouton[i].addEventListener('mouseout', function()
				{
					i = this.indice;
					map_appear[i].style.zIndex = '70';
					text_affichage = '&nbsp-';
					text_affichage_prix = '&nbsp-';
					zone_affichage.innerHTML = text_affichage;
					zone_affichage_prix.innerHTML = text_affichage;
				}
				);
			}
		}
		}

le bémol c'est que je n'ai plus ma fonction de compatibilité entre navigateur. j'ai aussi vu d'autre solution avec un return function
http://blog.jbrantly.com/2010/04/cre...on-inside.html

Je voulais juste savoir si il était possible de trouver une manière de faire avec une fonction, et non pas le simple ajout "addEventListener" ?

si ce n'est pas possible je ferais un contrôle dans ma boucle.

[NoSmoking]

Je voulais juste savoir si il était possible de trouver une manière de faire avec une fonction, et non pas le simple ajout "addEventListener" ?

tu peux mettre directement la fonction sur les événements

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  var oElem, i = 1;
  while( ( oElem = document.getElementById( i)){
    map_bouton[i] = oElem;
    map_appear[i] = document.getElementById( i +'b');
    map_bouton[i].indice = i;
 
    map_bouton[i].onmouseover = function(){
      map_appear[this.indice].style.zIndex = 90; // zIndex doit être un Number
      zone_affichage.innerHTML = '&nbspChancy';
      zone_affichage_prix.innerHTML = '<span style="color:red;">&nbspZone non delivrée</span>';
    };
 
    map_bouton[i].onmouseout = function(){
      map_appear[this.indice].style.zIndex = 70; // zIndex doit être un Number
      zone_affichage.innerHTML = '&nbsp-';
      zone_affichage_prix.innerHTML = '&nbsp-';
    });
    i++;
  }

[helkøwsky]

merci, ça joue parfaitement.

[NoSmoking]

une question se pose quand même, as tu besoin dans le reste de ton code des map_bouton[i] et des map_appear = [];, car dans ce cas tu peux faire du parfaitement trivial à savoir

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  var oElem, i = 1;
  while( ( oElem = document.getElementById( i)){
    oElem.onmouseover = function(){
      document.getElementById( this.id +'b').style.zIndex = 90;
      zone_affichage.innerHTML = '&nbspChancy';
      zone_affichage_prix.innerHTML = '<span style="color:red;">&nbspZone non delivrée</span>';
    };
 
    oElem.onmouseout = function(){
      document.getElementById( this.id +'b').style.zIndex = 70;
      zone_affichage.innerHTML = '&nbsp-';
      zone_affichage_prix.innerHTML = '&nbsp-';
    });
    i++;
  }