Discussion :

[jedeb]

Bonjour,

J'ai deux problèmes le premier je n'arrive pas à faire une fonction jQuery avec deux paramètres qui marchent (je veux réduire le code). Pour l'instant he traite image par image. Je vous simplement créer une fonction avec ces deux paramètres (images, titre).

Ci joint en bas mon code.

Mon second soucis, je ne sais pas si ça viens du jQuery.. Vous allé voir sur la vidéo quand je survole une image j'aimerais qu'elle remonte légèrement pour affiché son titre cependant il y à un problème les deux images à côtés descende sans raison ça viens peut être du tableau.

Voila le lien de la video ou verrais mon animation : https://www.youtube.com/watch?v=x1i0...ature=youtu.be

et le code :

Code html :

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

1
2
3
4
5
6
7
<table align="center">
   <tr>
       <td id="01"><img src="01.jpg" title="img1" class="img_menu"> <div id="test1" align="center" class="title">Titre</div></td>
       <td id="02"><img src="01.jpg" title="img2" class="img_menu"> <div id="test2" align="center" class="title">Titre</div></td>
       <td id="03"><img src="01.jpg" title="img3" class="img_menu"> <div id="test3" align="center" class="title">Titre</div></td>
   </tr>
</table>

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
$(function() {
	//Disparition des titres
	$('#test1').hide();		  
	$('#test2').hide();		  
	$('#test3').hide();		
	//Animations IMAGES
	$('[title="img1"]').mouseenter(function() { //au survol de l'image
		$('#test1').fadeIn('slow');        
	});
	$('[title="img1"]').mouseout(function() { //au survol de l'image
		$('#test1').hide();        
	});
	$('[title="img2"]').mouseenter(function() { //au survol de l'image
		$('#test2').fadeIn('slow');
	});
	$('[title="img2"]').mouseout(function() { //au survol de l'image
		$('#test2').hide();
	});
	$('[title="img3"]').mouseenter(function() { //au survol de l'image
		$('#test3').fadeIn('slow');
	});
	$('[title="img3"]').mouseout(function() { //au survol de l'image
		$('#test3').hide();
	});
	//TRANSPARENCE IMAGES
	$('[title="img1"]').mouseenter(function() { //au survol de l'image
		$('[title="img1"]').fadeTo('slow','0.5'); //pour afficher lentement peux aussi faire avec des valeurs genre 4000
	});
	$('[title="img1"]').mouseout(function() { //au survol de l'image
		$('[title="img1"]').fadeTo('slow','1');
	});
});

[headmax]

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
 
//J'utilise des arrays mais j'aurais pu le faire à partir d'un tableau Json {option:{events:{mouseenter:{images:{'IMAGE1_me.jpg','IMAGE2_me.jpg','IMAGE3_me.jpg'},titres:{...}}, mouseout:{images:{...},titres:{...}}}}} avec un seul paramètre
var events = ['mouseenter','mouseout'];
var images = ['IMAGE1.jpg','IMAGE2.jpg','IMAGE3.jpg'];
var titres = ['Titre1','Titre2','Titre3'];
 
 
(function( $ ){
  $.fn.anImg = function( events, images, titles, duration ) {
    var duration = (typeof(duration) === 'numeric') ? (duration/100) : duration;
      $(this).each(function(index){
            for(i in events)
            {
                $(this).bind(events[i], function()
                               {
                                  $(this).src = images[i]; // ton image 
                                  $(this).titles = titles[i]; // ton titre
                                  (i === false) ? $(this).fadeIn('' + duration + '') : $(this).fadeOut('' + duration + '');
                                  $(this).next().fadeIn();
                                }
                             );
            }
      });
  };
}( jQuery ));
 
//Pour tester
$(function() {
	//Disparition des titres
  $('div[id*="test"]').hide();
	//Animations IMAGES
  $('img[title*="img"]').anImg(events,images,titres, 'slow');
});