<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<style>

/*Style general de la page*/

body{font: 14px verdana, sans-serif;background: #000000;color:#C0C0C0;font-weight:bold;}

/*Style de la div permettant de masquer une partie de la dernière image*/

#mask{background: #000000;position:absolute;top:14%;left:65%;width:21%;height:28%;z-index:2;}

/*Style de la div contenant le texte correspondant à l’image sélectionnée*/

#rubrique{background: #000000;color:#ffff00;position:absolute;top:42%;left:5%;width:60%;height:30%;border:1px solid #fff;}

/*Style du menu et positionnement des images contenues*/

.menu {list-style-type:none;}

.menu img {position:absolute;top:15%;width:25%;height:25%;border:none;}

</style> 

<script type="text/javascript">

jQuery.noConflict();

//Agencement du menu. Boucle sur chaque image de la classe "menu". Chaque élement a un attribut left de 10 % supérieur à l’image précédente 

jQuery(function(){

nLeft = 5; 

nMenu = jQuery(".menu img").length;

for (i=1;i < nMenu + 1 ;i++){

jQuery("#" + i).css("left",nLeft + "%");

nLeft+=10;

}

jQuery("#rubrique").append("<p>Vous n\"avez encore survolé aucune image</p>"); 

});

//Variable indiquant qu’il n’y a pas eu encore d’image survolée.

//La valeur doit être égale au nombre d’images + 1

prev = 6;

jQuery(function(){

//Evénement lié au survol de la souris sur une image de la classe //"menu”

jQuery(".menu img").mouseover(function(){

//Récupération de l’id de l’image survolée

nId = jQuery(this).attr("id");

//Si aucune image n’a encore été survolée, décalage vers la droite de chaque image située après celle qui vient d’être sélectionnée.

if (prev == 6){ 

jQuery(".menu img:gt(" + (nId-1) +")").animate({"marginLeft": "+=10%"},1);

//Récupération de l’id pour la sélection suivante

prev=nId;

//Effacement du texte contenu dans le cadre

jQuery("#rubrique").text("");

//Dans l’exemple, affichage du titre de l’image sélectionnée

jQuery("#rubrique").append("<p>" + jQuery(this).attr("title") + "</p>");

}

//S’il ne s’agit pas d’un premier survol

else

{

//Réduction de l’image précédemment sélectionnée

jQuery(".menu img:gt(" + (prev-1) +")").animate({"marginLeft": "-=10%"},1);

//Décalage vers la droite de chaque image située après celle //qui vient d’être sélectionnée. 

jQuery(".menu img:gt(" + (nId-1) +")").animate({"marginLeft": "+=10%"},1);

//Effacement du texte et affichage du titre de l’image dans le //cadre situé sous le menu

jQuery("#rubrique").text("");

jQuery("#rubrique").append("<p>" + jQuery(this).attr("title") + "</p>"); 

prev=nId;

}



});



}); 

</script>

<div class="main">

<ul>

<li class="menu"><a href="#"><img id="1" src="/images/1.jpg" title=" L'ile Beaulieu à Nantes" alt="Menu slide jQuery"></a></li>

<li class="menu"><a href="#"><img id="2" src="/images/2.jpg" title=" La Place Royale à Nantes" alt="Menu horizontal jQuery"></a></li>

<li class="menu"><a href="#"><img id="3" src="/images/5.jpg" title=" Les abords de la cathédrale à Nantes" alt="Menu design jQuery"></a></li>

<li class="menu"><a href="#"><img id="4" src="/images/10.jpg" title=" Le Musée d'histoire naturelle à Nantes" alt="Menu css jQuery"></a></li>

<li class="menu"><a href="#"><img id="5" src="/images/4.jpg" title=" La cour du Château des Ducs de Bretagne à Nantes" alt="Menu images jQuery"></a></li>

</ul>

</div>

<div id="mask"></div>

<div id="rubrique"></div>