Bonjour à tous,

Je suis en train de réaliser une gallerie d'image, l'idée, vous la connaissez, c'est de mettre des petits thumbnails les uns à côté des autres en réduit, et, quand on clique dessus, qu'il apparaisse en grand.

j'ai donc un <table> avec mes vignettes et plus loin, une div de destinations des grand format.

Le souçis, c'est que quand je clique sur 1 photo, elle s'affiche. Puis quand je clique sur 1 autre photo, elle s'affiche sans que la première disparaisse...

embêtant hein?!


Ma fonction JS:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
//------------------
function Swap( div_){
  var Obj = document.getElementById( div_);
  if( Obj){
    if( Obj.style.display=="")
      Obj.style.display="none";
    else
      Obj.style.display="";
  }
}
</script>


mon code pour les vignettes:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<table>
<tr>
 
<td><a href="#Photo1"  onclick="Swap('DIV_Photo1');">
<img src="images/photo1.png"  width="140" id="gallerie">
</a></td>
 
<td><a href="#Photo2"  onclick="Swap('DIV_Photo2');">
<img src="images/photo2.png"  width="140" id="gallerie">
</a></td>
 
</tr>
</table>
et enfin le code de la div de destination du grand format:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
 
<table>
<tr>
<td>
<div id="DIV_Photo1" style="display:none" >
<img src="images/photo1.png" width="100%"></div>
 
<div id="DIV_Photo2" style="display:none" >
<img src="images/photo2.png" width="100%"></div>
</td>
</tr>
</table>
Vous pourriez m'aider? merci