débutant en jQuery (aide code)

Version imprimable

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:

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:

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:

$("#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

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
$("#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;
	});

22/12/2009, 18h32
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 ?

Hello,

Code:

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.