Discussion :

[youtch]

Je n'ai pas vraiment compris pourquoi, mais JQuery n'est pas si simple qu'il n'y parait à utiliser :

ce code ne marche pas correctement :

Voici le script JS qui est dans la page HTML :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
	var tab_img=["imgPromo1","imgPromo2","imgPromo3","imgPromo4","imgPromo5","imgPromo6"];
 
		jQuery.each(tab_img, function() {
 
			$('#'+this).mouseover(function(e){ affImgGrand(this,e.pageX,e.pageY) });
 
			$('#'+this).mouseout(function(e){ cachImgGrand(this)});
 
		});

C'est simple, il déclenche le lancement de addImgGrand contenu dans un fichier JS externe, sa fonction est d'afficher les images en grand contenue dans un <div> (de imgPromo1 à imgPromo6) :

<div id="imgPromo1" style="display:none"><img src="monimg.gif" class="truc"></div> (remarquez qu'au démarrage il est cachée par style="display:none").

Quant à cachImgGrand() il fait disparaitre notre <div>, quelque chose m'a échappé ?! "this" ne semble pas être sous la bonne forme en arrivant dans la fonction, car je récupère un objet (testé avec alert() )!



Mes 2 fonctions externes :

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
 
	function affImgGrand(eltId,x,y)
 
	{
 
		eltId=eltId+"-Gde";
 
		$("#"+eltId).css("left",20+x+"px");
 
		$("#"+eltId).css("top",20+y+"px");
 
		$("#"+eltId).show();
 
	}
 
	function cachImgGrand(eltId)
 
	{
 
		eltId=eltId+"-Gde";
 
		$("#"+eltId).hide();
 
	}

[danielhagnoul]

Bonsoir

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
<script>
	/*
	 * C'est le comportement normal, pour
	 * le comprendre je vous conseille d'utiliser
	 * Firebug et console.log()
	 */
	function affImgGrand(elt, x, y){
		console.log(elt, elt.id);
 
		$("#"+ elt.id + "-Gde").css({
			"left": 20+x+"px",
			"top": 20+y+"px"
		}).show();
	}
 
	function cachImgGrand(elt){
		//console.log(elt, elt.id);
 
		$("#"+ elt.id + "-Gde").hide();
	}
 
	$(function(){
		var tab_img = ["imgPromo1", "imgPromo2"];
 
		$.each(tab_img, function(i, item){
			// ici je vous conseille item et non this
			// voir la doc sur $.each()
			console.log(item);
 
			$('#'+item).mouseenter(function(e){
				// ici this est égal à $('#'+item)[0]
				console.log(this);
 
				affImgGrand(this, e.pageX, e.pageY);
			});
 
			$('#'+item).mouseleave(function(){
				// ici this est égal à $('#'+item)[0]					
				console.log(this);
 
				cachImgGrand(this);
			});
		});
	});
</script>

[youtch]

Ce n'était pas évident de le deviner, en consultant la doc d'API je n'arrivais pas à trouver la solution... Merci pour l'éclairage pertinent !