[jQuery] Liens en sur-impression d'une image

Bonjour,

Je suis débutant dans l'utilisation de jQuery et j'essaie de réaliser un petit script sans y arriver. Je viens donc chercher votre aide.

Je souhaite ajouter deux liens sur une image. Un lien "précédent" à qui se calerais à gauche de l'image et un lien "suivant" qui se calerais à droite de l'image.
Ces liens apparaitraient via un "fadeIn()" au passage de la souris sur la partie gauche et droite de l'image.

En fait je souhaite reproduire le même comportement que les scripts "lightbox" qui permettent de passer d'une image à l'autre en cliquant soit à gauche ou à droite de l'image courante.

Quelqu'un aurait il une piste pour réaliser quelque chose dans le genre ? J'ai pas mal cherché cet aprem' mais sans succès...

Merci d'avance.

Voici une piste de procédure si ça peut t'aider :

- ajouter 2 div an absolute sur ton image. L'un sur la partie gauche et l'autre la partie droite. Ce seront les parties "sensibles" de ton image.
- ajouter les flèches dans chaque div respectif.
- au survol d'une des zones sensibles on effectue un fadein sur ses enfants (la flèche qu'il contient). Et inversement quand on sort de la zone.
- au clic on change l'image.

Salut,

Merci pour ta réponse.

J'aurais pensé qu'on puisse automatiser tout ca avec jQuery mais en fin de compte il s'agit plus de CSS que de JS.

Bref, j'ai donc fais un petit test et je suis parvenu à faire quelque chose qui ressemble à ce que je veux

Pour ceux que ca intéresserais voici mon bout de code :

Le js :

$(document).ready(function(){
		$("#gal .prec, #gal .next").css({'visibility':'visible', 'width':'225px', 'height':'500px'});
		$("#gal .next").css({'margin-left':'225px'});
		$("#gal .prec, #gal .next").children('img').fadeOut(0);
		
		$("#gal .prec, #gal .next").hover(function(){
			$(this).children('img').fadeIn(600);
		},function(){
			$(this).children('img').fadeOut(200);
		});
	});

Le css :

#gal .prec, #gal .next{
		position: absolute;
		visibility: hidden;
	}
	#gal .next{
		text-align:right;
	}
	#gal .prec img, #gal .next img{
		border: none;
	}

Puis le html :

<div id="gal">
	<a href="#prec" class="prec"><img src="prev.png" alt="prec"/></a>
	<a href="#next" class="next"><img src="next.png" alt="next"/></a>
	<img src="img.jpg" alt="img"/>
</div>

Bonne soirée à tous.