Afficher une image grande à partir de sa miniature

[amazigh_antalas]

Bonjour ,

j'ai trouvé ce code qui pourrais à peu près faire l'affaire.

============C O D E ===========

echo'<div class="thumb">';
echo'<a href="#">';
echo'<div id="PETIT"><img src="http://localhost/website/images/images_page_produit/produits/images_gf/['.$Ref.']MINI.jpg" alt="miniature Polyommatus-icarus" style="width:98px; height:120px" rel="thumbnail"/> </div>';
echo'<img src="http://localhost/website/images/images_page_produit/produits/images_gf/['.$Ref.']MINI.jpg" alt="Inachis-io" class="grand" />';
echo'</a>';
echo'</div>';


============C O D E ===========
précision:$Ref est la référence des produits correspondant à l'image.
=========C S S ================
<style>body {
background-color:white;
color:white;
height:1000px;
}

.img {
border:1px solid black;
}

.thumb {
float:right;
width:686px;
top:0;
left:0;
}

.thumb a {
margin:0;
text-decoration:none;
}

.thumb a:hover {
background-color:black;
}

.thumb a .grand {

float:left;
width:0;
}

.thumb a:hover .grand {
float:left;
top:122px;
left:0;
width:300px;
height:400px;

}
#PETIT{
float:right;
width:98px;
height:120px}

</style>
=========C S S ================

le code marche bien quand il y a une seul image ,mais quand il ya plus ça part dans tous les sens ,à cause des divs je crois.

Moi je veux que un maximum de dix miniature s'affichent à droite, en deux colonnes et en passant avec la souris sur chaque miniature elle m'affiche l'image grande à gauche des miniature.Je veux aussi que on puisse afficher l'image de grande taille même en cliquant sur la miniature.

Tous ça se passera dans un onglet qui a 600 px de width.

Pouvez vous m'aider ?

Merci;