Hello,

Je suis en train de faire une liste de menu de restauration avec une image .jpg pour les représenter.

Voici comment j'ai fait en html
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
<div class="large">
	<img id="menu" src="img/menu_large.jpg">
</div>
<div class="little">
	<img class="menus" src="img/menu1.jpg" onclick="change('img/menu1_large.jpg')" alt="menus">
	<img class="menus" src="img/menu2.jpg" onclick="change('img/menu2_large.jpg')" alt="menus">
	<img class="menus" src="img/menu3.jpg" onclick="change('img/menu3_large.jpg')" alt="menus">
	<img class="menus" src="img/menu4.jpg" onclick="change('img/menu4_large.jpg')" alt="menus">
	<img class="menus" src="img/menu5.jpg" onclick="change('img/menu5_large.jpg')" alt="menus">
</div>

en javascript
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
function change(imageaaffiche){
  document.getElementById('menu').src =imageaaffiche;
}
var img = $("#menu");
var clk = $(".menus");
  clk.on('click', function(){
    img.addClass('active');   
  })
et en css
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
.active{
	-webkit-animation:anyname 2s; /* Safari and Chrome */
}
@-webkit-keyframes anyname{ /* Safari and Chrome */
	from {opacity: 0;}
	to {opacity: 1;}
}


la div "large" fait apparaitre en grand le menu sur lequel on a cliqué. Dès que l'on clique sur une autre miniature, l image en grand change.

Jusqu'ici tout va bien, l image en grand change comme je le veut. Ce que je voudrais, c est d'avoir une transition (une sorte de fadeIn()) entre 2 changements.


en javascript, j'ajoute une class active qui a pour but de savoir sur qu elle menu nous sommes et de faire les animations necessaire coté css.
Je ne sais pas si c'est l'heure qui fait ça, mais je n'arrive pas a le faire. Cela marche la premiere fois que je clique mais pas les autres fois.

Merci ;)