salut,
voilà un petit script fonctionnel, mais voilà, je ne sais pas comment l'optimiser.

je sais qu'en utilisant $(trucMuche).each(function(index){}) y a moyen d'y arriver, mais je ne sais pas comment distinguer la sélection courante, de celle qui ne l'est pas....
Bref, ça sera plus clair par l'exemple:
http://lefelinherbivore.com/test/
l'ensemble de l'exemple à télécharger par là: (.rar)

et ici, mon js:
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
 
$(document).ready(function(){
	var bottom0=false;
	var bottom1=false;
	var bottom2=false;
	$('.lien0').click(function(){
		$(this).css('backgroundPosition','bottom');
		bottom0=true;
		if(bottom1==true){
		$('.lien1').css('backgroundPosition','top');
		bottom1=false;
		}
		if(bottom2==true){
		$('.lien2').css('backgroundPosition','top');
		}
	})
	$('.lien1').click(function(){
		$(this).css('backgroundPosition','bottom');
		bottom1=true;
		if(bottom0==true){
		$('.lien0').css('backgroundPosition','top');
		bottom0=false;
		}
		if(bottom2==true){
		$('.lien2').css('backgroundPosition','top');
		bottom2=false;
		}
	})
	$('.lien2').click(function(){
		$(this).css('backgroundPosition','bottom');
		 bottom2=true;
		if(bottom0==true){
		$('.lien0').css('backgroundPosition','top');
		bottom0=false;
		}
		if(bottom1==true){
		$('.lien1').css('backgroundPosition','top');
		bottom1=false;
		}
	})
 
})
ici mon css
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
 
li, ul{list-style:none;
}
a{
	text-align:center;
	font:normal 9px Arial, Helvetica, sans-serif;
	color:#333;
	float:left;
	text-decoration:none;
	background:url(test.jpg) top left no-repeat;
	display:block;
	width:45px;
	height:8px;
}
a:hover, .bottom{
	background-position:bottom;
}
a:focus{
	outline:none;
}
 
.up{
	background-position:top
	}
ici mon html
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
 
<ul>
  <li>
    <a class="lien0" href="#">lien 0</a>
  </li>
  <li>
    <a class="lien1" href="#">lien 1</a>
  </li>
  <li>
   <a class="lien2" href="#">lien 2</a>
  </li>
</ul>
Mille mercis pour votre aide ;-)