[Résolu] [DOM Scripting] Afficher/masquer des images

Afficher/masquer des images [Résolu] [DOM Scripting] - HTML/CSS - Programmation

Marsh Posté le 21-06-2006 à 11:19:05    

Salut,
 
Je suis en train de faire un script qui permet d'afficher un nombre fixe d'images dans un bloc, avec un lien pour afficher le reste d'images s'il y en a.
Ca marche plus ou moins, à part que le lien normal est quand même suivi, malgré le return false, donc ça recharge les pages et les images ne sont visibles qu'une fraction de secondes.
 
Voilà le code :
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>showImages</title>
  6. <script type="text/javascript">
  7. <!--
  8. var maxImages = 2; // Nombre d'images maximum à afficher
  9. function showImages() { // Fonction pour afficher les images
  10.     for(var i=maxImages;i<images.length; i++) { //Boucle pour mettre les images après maxImages en display: inline
  11.     images[i].style.display = 'inline';
  12.     }
  13. }
  14. function hideImages() {  // Fonction pour masquer les images
  15.     var viewAllImages = document.getElementById("viewAllImages" ); // le lien pour afficher toutes les images
  16.     var imagesContainer = document.getElementById("imagesContainer" );  // le bloc contenant les images
  17.     var images = imagesContainer.getElementsByTagName("img" ); // récuperation des tags img contenus dans imagesContainer
  18.     for(var i = maxImages; i < images.length; i++) { // boucle pour masquer les images
  19.         images[i].style.display = 'none';
  20.     }
  21.     viewAllImages.onclick = function() { // événement onclick sur le lien viewAllImages
  22.         showImages(); // appel de la fonction showImages()
  23.         return false; // pour désactiver le comportement par défaut du lien     
  24.     }
  25. }
  26. window.onload = function() { // chargement de la fonction hideImage au chargement de la page
  27.     hideImages();
  28. }
  29. -->
  30. </script>
  31. </head>
  32. <body>
  33. <div id="imagesContainer">
  34. <img src="image.jpg" alt="" />
  35. <img src="image.jpg" alt="" />
  36. <img src="image.jpg" alt="" />
  37. <img src="image.jpg" alt="" />
  38. </div>
  39. <p><a href="" id="viewAllImages">Toutes les images</a></p>
  40. </body>
  41. </html>


La page en question
 
J'ai dû faire un truc de travers, mais je ne vois pas où  :sweat:  
 
Merci


Message édité par ced64k le 21-06-2006 à 21:08:09
Reply

Marsh Posté le 21-06-2006 à 11:19:05   

Reply

Marsh Posté le 21-06-2006 à 11:25:18    

Im not a got for JS...
 
Mais la variable images tu la déclare dans la fonction hide
 
Et elle est pas global...
 
Aprés il peu avoir dautre souci :D

Reply

Marsh Posté le 21-06-2006 à 20:47:14    

une autre méthode un peu plus warrior mais plus rapide et super souple qui consiste à utiliser les CSS pour cacher et afficher les img  
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4. <title></title>
  5. <style type="text/css">
  6.  .hideall img {display:none;}
  7.  .hideall img.show {display:inline;}
  8.  .hideall a {display:block}
  9.  .showall img {display:inline;}
  10. </style>
  11. <script type="text/javascript">
  12. function hideall(imgctnid) {
  13.  var imgctn = document.getElementById(imgctnid); //on recupere le bloc
  14.  var maxImg = imgctn.getAttribute("maximg" ); //on recupere le nombre d'images a afficher
  15.  imgctn.className="hideall"; // on cache toutes les images via une classe
  16.  var img = imgctn.getElementsByTagName("img" ); //on recuperes toutes les img
  17.  for (var i=0; i<maxImg && i<img.length; i++) { //on parcours les img seulement le nombre maximum indique
  18.   img[i].className="show"; //on affiche les images
  19.  }
  20.  var a = imgctn.getElementsByTagName("a" )[0];
  21.  a.onclick = function () {
  22.   var imgctn = this;
  23.   while(imgctn.className.indexOf("hideall" )==-1) imgctn = imgctn.parentNode; //on recupere le bloc parent
  24.   if (!imgctn) return;
  25.   imgctn.className="showall"; //on affiche toutes les images
  26.   this.parentNode.removeChild(this); //on vire le lien qui ne sert plus a rien
  27.  }
  28. }
  29. window.onload = function() {
  30.  hideall('imagesContainer');
  31. }
  32. </script>
  33. </head>
  34. <body onload="">
  35. <div id="imagesContainer" maximg="2">
  36.  <img src="http://image.radio-france.fr/img/media_planning/fi_60_laportedomenech.gif" alt="1" />
  37.  <img src="http://www.laction.com/imgs/dynamique/journalistes/stephane1.jpg" alt="2" />
  38.  <img src="http://www.fraternite-info.com/IMG/auton13.jpg" alt="3" />
  39.  <img src="http://www.lexpress.mu/images/lexpress_culture.jpg" alt="4" />
  40.  <a href="#">Show all</a>
  41. </div>
  42. </body>
  43. </html>


 
sinon concernant ton code tu attend 5 minutes je te le corrige


Message édité par gatsu35 le 21-06-2006 à 20:48:54
Reply

Marsh Posté le 21-06-2006 à 20:51:59    

voila corrigé :  
 
tu déclares une variable globale en début de script :  
 
var images;
 
ensuite dans ta fonction hideimage, tu vires le "var" devant "images", comme ça tu te sers de la variable globale, et ainsi dans showimage pas de souci, images sera reconnue
 
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.     <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.     <title>showImages</title>
  6.     <script type="text/javascript">
  7.     <!--
  8.     var maxImages = 2; // Nombre d'images maximum a afficher
  9.     var images; // var globale
  10.     function showImages() { // Fonction pour afficher les images
  11.        for(var i=maxImages;i<images.length; i++) { //Boucle pour mettre les images apr&egrave;s maxImages en display: inline
  12.        images[i].style.display = 'inline';
  13.        }
  14.     }
  15.    
  16.     function hideImages() {  // Fonction pour masquer les images
  17.        var viewAllImages = document.getElementById("viewAllImages" ); // le lien pour afficher toutes les images
  18.        var imagesContainer = document.getElementById("imagesContainer" );  // le bloc contenant les images
  19.        images = imagesContainer.getElementsByTagName("img" ); // r&eacute;cuperation des tags img contenus dans imagesContainer
  20.        for(var i = maxImages; i < images.length; i++) { // boucle pour masquer les images
  21.            images[i].style.display = 'none';
  22.        }
  23.        viewAllImages.onclick = function() { // &eacute;v&eacute;nement onclick sur le lien viewAllImages
  24.            showImages(); // appel de la fonction showImages()
  25.            return false; // pour d&eacute;sactiver le comportement par d&eacute;faut du lien     
  26.        }
  27.     }
  28.    
  29.     window.onload = function() { // chargement de la fonction hideImage au chargement de la page
  30.        hideImages();
  31.     }
  32.     -->
  33.     </script>
  34.     </head>
  35.     <body>
  36.     <div id="imagesContainer">
  37.     <img src="image.jpg" alt="" />
  38.     <img src="image.jpg" alt="" />
  39.     <img src="image.jpg" alt="" />
  40.     <img src="image.jpg" alt="" />
  41.     </div>
  42.     <p><a href="" id="viewAllImages">Toutes les images</a></p>
  43.     </body>
  44.     </html>



Message édité par gatsu35 le 21-06-2006 à 20:52:21
Reply

Marsh Posté le 21-06-2006 à 21:07:19    

Merci beaucoup Gatsu, ça marche  :)  Je mélange encore les variables locales et globales  :pt1cable:

Reply

Sujets relatifs:

Leave a Replay

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