swap d'images [résolu]

swap d'images [résolu] - HTML/CSS - Programmation

Marsh Posté le 24-07-2005 à 15:26:08    

Salut à tous.
 
Je suis en train de me battre avec du javascript et je m'en sors donc je viens demander conseil. Voilà ce que je veux :  
j'ai neuf images (des miniatures) dans un cadre et j'aimerais que lorsqu'on clique sur une image, elle s'affiche en gros dans le cadre, et que lorsqu'on reclique sur la grande image, la page soit restaurée (cad que les minitaure reviennent).
 
Quelqu'un pourrait me dire quelle serait la maniere la plus élégante de faire ce genre de chose ?
 
Merci.


Message édité par Papy Brossard le 26-07-2005 à 08:45:37
Reply

Marsh Posté le 24-07-2005 à 15:26:08   

Reply

Marsh Posté le 24-07-2005 à 16:16:07    

on peu avoir un bout de ton code ?????
 
sinon tu as exactement ce que tu recherche ici :  
 
http://css.alsacreations.com/Tutor [...] javascript

Reply

Marsh Posté le 24-07-2005 à 17:32:03    

Coucou
 
ça fait pas exactement ce que je veux puisque j'aimerais que la liste des images à agrandir soit affichée seule et revienne une fois qu'une "grande" image a été vue (et que l'utilisateur clique).
 
Je vais ajouter le code :  
 
le css :

Code :
  1. /* Ajout des cadres dans le cadre rangeeUn */
  2. ul#rangeeUn {
  3. margin-top: 6px;
  4. list-style-type: none;
  5. width: 470px;
  6. height: 92px;
  7. }
  9. ul#rangeeUn li {
  10. display: inline;
  11. text-align: center;
  12. }
  14. ul#rangeeUn li a {
  15. width: 139px;
  16. height: 91px;
  17. float:left;
  18. margin-left: 15px;
  19. background-image: url(../images/cadre.png);
  20. background-repeat:no-repeat;
  21. }


et le html ou y'a les miniatures :  

Code :
  1. <div class="cadreContenu">
  2.       <div class="contenu" id="contenu">
  3.         <ul id="rangeeUn">
  4.           <li"><a><img src="toto.JPG" alt="toto" /></a></li>
  5.           <li><a><img src="titi.JPG" alt="toto" /></a></li>
  6.           <li><a><img src="tata.JPG" alt="toto" /></a></li>
  7.         </ul>
  8.         <ul id="rangeeDeux">
  9.           <li><a><img src="tutu.JPG" alt="toto" /></a></li>
  10.           <li><a><img src="tete.JPG" alt="toto" /></a></li>
  11.           <li><a><img src="tyty.JPG" alt="toto" /></a></li>
  12.         </ul>
  13.         <ul id="rangeeTrois">
  14.           <li><a><img src="toto2.JPG" alt="toto" /></a></li>
  15.           <li><a><img src="titi2.JPG" alt="toto" /></a></li>
  16.           <li><a><img src="tata2.JPG" alt="toto" /></a></li>
  17.         </ul>
  18.         <ul id="rangeeQuatre">
  19.           <li><a><img src="tutu2.JPG" alt="toto" /></a></li>
  20.           <li><a><img src="tete2.JPG" alt="toto" /></a></li>
  21.           <li><a><img src="tyty2.JPG" alt="toto" /></a></li>
  22.         </ul>
  23.       </div>
  24.     </div>


 
 
Donc en gros, ce que je voudrais c'est que lorsqu'on clique sur une image, elle occule toutes les miniatures et s'affiche seule dans le div  <div class="contenu" id="contenu">.
 
Je suis assez clair ?
 
Merci d'avance !

Reply

Marsh Posté le 24-07-2005 à 18:04:19    

tu peux virer class="contenu" puisque tu peux ajouter tes styles directement sur contenu
et idem pour tes id de rangéestrucmuche sur les UL ca sert à rien du tout
 
m'enfin bon tu fais comme tu veux mais ce code là marche :  
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title></title>
  6. <style>
  7. #cadreGallerie{
  8.  width:300px;
  9.  height:200px;
  10.  border: 1px solid red;
  11. }
  13. #cadreGallerie DIV{
  14. }
  16. #cadreGallerie UL{
  17.  border: 1px solid black;
  18.  float:left;
  19.  margin:0;
  20.  padding:0;
  21.  clear:both;
  22.  width:200px;
  23.  margin-left:auto;
  24.  margin-right:auto;
  25.  list-style:none;
  26. }
  27. #cadreGallerie UL LI {
  28.  float:left;
  29.  text-align: center;
  30.  margin:auto;
  31. }
  33. #cadreGallerie UL LI A{
  34.  display: block;
  35. }
  36. #cadreGallerie UL LI A IMG{
  37.  width:50px;
  38.  height:50px;
  39.  border:none;
  40. }
  41. #cadreGallerie IMG{
  42.  border:none;
  43.  cursor:pointer;
  44. }
  45. #imageGallerie{
  46.  display: none;
  47.  width:100%;
  48.  height:100%;
  49. }
  50. </style>
  51. <script>
  52. function gallery(){
  53.  var MaGallery = document.getElementById("cadreGallerie" );
  54.  var contenu = MaGallery.getElementsByTagName("DIV" ); //On récupère le div qui contient tous les UL
  55.  var LiensImg = MaGallery.getElementsByTagName("A" ) //on recupère toutes les images de la gallery
  56.  for (var i=0; i<LiensImg.length-1; i++)  //on parcours tous les liens des images de la gallery et pour un lien trouvé on lui rajoute une fonction
  57.   LiensImg[i].onclick = function(){
  58.    var MaGallery = document.getElementById("cadreGallerie" );
  59.    var ULGal = MaGallery.getElementsByTagName("UL" );
  60.    for(var i=0; i<ULGal.length; i++) ULGal[i].style.display = "none";
  61.    var image = MaGallery.getElementsByTagName("IMG" )[0]; //On récupère la première image
  62.    image.src = this.href;
  63.    image.alt = this.getElementsByTagName("IMG" )[0].alt;
  64.    image.title =  this.getElementsByTagName("IMG" )[0].title;
  65.    image.onclick = function(){
  66.     var MaGallery = document.getElementById("cadreGallerie" );
  67.     var ULGal = MaGallery.getElementsByTagName("UL" );
  68.     for(var i=0; i<ULGal.length; i++) ULGal[i].style.display = "block";
  69.     this.style.display = "none";
  70.    }
  71.    image.style.display = "block";
  72.    return false;
  75.  }
  76. }
  78. window.onload = gallery;
  80. </script>
  81. </head>
  83. <body>
  85. <div id="cadreGallerie">
  86. <img id="imageGallerie">
  87.     <div>
  88.         <ul>
  89.           <li><a href="toto.JPG"><img src="toto.JPG" alt="toto" /></a></li>
  90.           <li><a href="titi.JPG"><img src="titi.JPG" alt="titi" /></a></li>
  91.           <li><a href="tata.JPG"><img src="tata.JPG" alt="tata" /></a></li>
  92.         </ul>
  93.         <ul>
  94.           <li><a href="#"><img src="tutu.JPG" alt="toto" /></a></li>
  95.           <li><a href="#"><img src="tete.JPG" alt="toto" /></a></li>
  96.           <li><a href="#"><img src="tyty.JPG" alt="toto" /></a></li>
  97.         </ul>
  98.         <ul>
  99.           <li><a href="#"><img src="toto2.JPG" alt="toto" /></a></li>
  100.           <li><a href="#"><img src="titi2.JPG" alt="toto" /></a></li>
  101.           <li><a href="#"><img src="tata2.JPG" alt="toto" /></a></li>
  102.         </ul>
  103.         <ul>
  104.           <li><a href="#"><img src="tutu2.JPG" alt="toto" /></a></li>
  105.           <li><a href="#"><img src="tete2.JPG" alt="toto" /></a></li>
  106.           <li><a href="#"><img src="tyty2.JPG" alt="toto" /></a></li>
  107.         </ul>
  108.       </div>
  109. </div>
  111. </body>
  112. </html>


 
PS : mes petites mains pottelées sont généreuses en ce moment


Message édité par gatsusat le 24-07-2005 à 19:49:18
Reply

Marsh Posté le 24-07-2005 à 19:22:14    

ça marche plutot bien mais j'ai u peu de mal à le mettre à ma sauce. Enfin, j'y arrive mais les images s'affichent pas quand on clique dessus (j'ai le texte alternatif).  
Une explication ?  :jap:
 
Edit : en fait ça marche, je me suis débrouill:é comme une burne au déut, c'est tout.
Merci bcp gatsuat. Et puis grace à toi, je peux me venter d'avoir du code de pro ;)


Message édité par Papy Brossard le 26-07-2005 à 08:45:18
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed