Appel d'une fonction et passage de paramètres

**rolandl** · 17/09/2012, 17h38

Bonjour à tous,

Avant toute chose, je tiens à préciser que je suis un néophyte complet en ce qui concerne l'utilisation de JQuery.

Dans une page HTML, j'ai des vignettes. Je souhaite que lors du passage de la souris sur l'une de ces vignettes, une image change sur à un emplacement bien précis de ma page.

Si j'utilise le javascript classique, j'y arrive sans problème.

Voici un morceau de code qui sera probablement plus parlant :

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
<div id="contenu_page">
	<div class="illustration-gauche">
		<?php if($menu->image() != null) { ?>
			<img id="illustration-gauche-img" src="<?php echo $menu->image(); ?>" />
		<?php } ?>
	</div>
 
	<div class="illustration-droite">
		<?php foreach($portfolioList as $portfolio) { ?>
 
		<div class="portfolio">
			<h2 class="portfolio-titre">
				<a href="portfolio-<?php echo strtolower(str_replace(' ', '-', $portfolio->libelle())); ?>-<?php echo $portfolio->id(); ?>.html"><?php echo $portfolio->libelle(); ?></a>
			</h2>
 
			<a href="portfolio-<?php echo strtolower(str_replace(' ', '-', $portfolio->libelle())); ?>-<?php echo $portfolio->id(); ?>.html">
				<img src="<?php echo $portfolio->couverture(); ?>" alt="couverture <?php echo $portfolio->libelle(); ?>" onmouseover="document.getElementById('illustration-gauche-img').src='<?php echo $portfolio->illustration(); ?>'" />
			</a>
		</div>
 
		<?php } ?>
 
		<div class="clear"></div>			
	</div>
 
	<div class="clear"></div>
</div>

Je cherche maintenant à faire la même chose en utilisant JQuery pour y ajouter des effets.

J'arrive à changer l'image en "statique" en ajoutant une classe à mes vignettes :

Code :

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

1
2
3
4
5
$(document).ready(function() {				
		$('.illustration-droite-img').hover(function() {
			$('#illustration-gauche-img').attr('src', '/images/upload/a6828ebea6adfd498971dabbca4150a4.jpg');
		});
	});

Mais comment faire "dynamiquement" ? Comment faire passer en paramètre de la fonction l'image que je souhaite afficher ?

J'en profite également pour vous demander comment ajouter une animation au moment ou l'image change ?

J'ai essayé quelque chose comme ça, mais le résultat n'est pas terrible...

Code :

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

1
2
3
4
5
6
7
$(document).ready(function() {				
		$('.illustration-droite-img').hover(function() {
			$('#illustration-gauche-img').fadeOut();
			$('#illustration-gauche-img').attr('src', '/images/upload/a6828ebea6adfd498971dabbca4150a4.jpg');
			$('#illustration-gauche-img').fadeIn();
		});
	});