Discussion :

[link.80]

Bonjour,
Je débutes en JQuery, j'ai réussi grâce à quelques tutos sur le net à créer un bout de code assez simple qui au chargement de la page me fait un effet d'opacité (fadeTo) sur 3 vignettes (#nav_departements a), lors du passage de la souris (hover) sur ces vignettes elles deviennent pleines.

Code :

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

1
2
3
4
5
6
$("#nav_departements a").fadeTo(0, 0.3);
			$("#nav_departements a").hover(function(){
			$(this).fadeTo("fast", 1.0);
			},function(){
			$(this).fadeTo("fast", 0.3);
			});

Lors du survol de ces vignettes je veux changer le contenu j'y arrive grâce à ce code :

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
		$("#nav_departements a").hover(function(){
		page=$(this).attr("class");
		$.ajax({
 
		url: "pages/departements/dep_"+page+".php",
		cache:false,
		success:function(html){
			afficher(html);
		},
		error:function(XMLHttpRequest,textStatus, errorThrown){
		alert(textStatus);	
		}
 
		})
		return false;
	});

j'ai deux questions, comment sur le code ci-dessus faire pour que l'effet recherché se produise lors du hover mais aussi lors du click ?
j'ai essayé de combiner quelque chose dans ce style et quelques autres variantes mais en vain, je suis obligé de copier/coller tout le code pour juste changer .hover en .click :

Code :

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

$("#nav_departements a").hover+.click(function(){

deuxième question, comment rendre ma vignette active (pleine)
lorsque le contenu de celle ci est activé ? Car avec ce code dès que je quitte la zone elle se remet en opacité réduite.

D'avance merci pour votre aide

[lemirandais]

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
$("#nav_departements a").hover(function(){
		page=$(this).attr("class");
		$.ajax({
 
		url: "pages/departements/dep_"+page+".php",
		cache:false,
		success:function(html){
			afficher(html);
		},
		error:function(XMLHttpRequest,textStatus, errorThrown){
		alert(textStatus);	
		}
 
		})
		return false;
	});
$("#nav_departements a").click(function(){
		page=$(this).attr("class");
		$.ajax({
 
		url: "pages/departements/dep_"+page+".php",
		cache:false,
		success:function(html){
			afficher(html);
		},
		error:function(XMLHttpRequest,textStatus, errorThrown){
		alert(textStatus);	
		}
 
		})
		return false;
	});

[link.80]

merci pour la réponse, ma question était justement de savoir si il y avait un moyen de raccourcir ce code plutot que de le copier/coller puis de changer la partie : .hover/.click


sinon quelqu'un aurait une idée pour garder l'image pleine (désactiver l'opacité) lorsque la page est affichée ?

[sebdz]

Hello,

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
 
$("#nav_departements a").bind("hover click",function(){
		page=$(this).attr("class");
		$.ajax({
 
		url: "pages/departements/dep_"+page+".php",
		cache:false,
		success:function(html){
			afficher(html);
		},
		error:function(XMLHttpRequest,textStatus, errorThrown){
		alert(textStatus);	
		}
 
		})
		return false;
	});

devrait fonctionner.