[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
  10. function showImages() { // Fonction pour afficher les images
  11.     for(var i=maxImages;i<images.length; i++) { //Boucle pour mettre les images après maxImages en display: inline
  12.     images[i].style.display = 'inline';
  13.     }
  14. }
  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.     var images = imagesContainer.getElementsByTagName("img" ); // ré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() { // événement onclick sur le lien viewAllImages
  24.         showImages(); // appel de la fonction showImages()
  25.         return false; // pour désactiver le comportement par défaut du lien     
  26.     }
  27. }
  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>


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">
  3. <html>
  4. <head>
  5. <title></title>
  6. <style type="text/css">
  7.  .hideall img {display:none;}
  8.  .hideall img.show {display:inline;}
  9.  .hideall a {display:block}
  10.  .showall img {display:inline;}
  12. </style>
  13. <script type="text/javascript">
  14. function hideall(imgctnid) {
  15.  var imgctn = document.getElementById(imgctnid); //on recupere le bloc
  16.  var maxImg = imgctn.getAttribute("maximg" ); //on recupere le nombre d'images a afficher
  17.  imgctn.className="hideall"; // on cache toutes les images via une classe
  18.  var img = imgctn.getElementsByTagName("img" ); //on recuperes toutes les img
  19.  for (var i=0; i<maxImg && i<img.length; i++) { //on parcours les img seulement le nombre maximum indique
  20.   img[i].className="show"; //on affiche les images
  21.  }
  22.  var a = imgctn.getElementsByTagName("a" )[0];
  23.  a.onclick = function () {
  24.   var imgctn = this;
  25.   while(imgctn.className.indexOf("hideall" )==-1) imgctn = imgctn.parentNode; //on recupere le bloc parent
  26.   if (!imgctn) return;
  27.   imgctn.className="showall"; //on affiche toutes les images
  28.   this.parentNode.removeChild(this); //on vire le lien qui ne sert plus a rien
  29.  }
  30. }
  31. window.onload = function() {
  32.  hideall('imagesContainer');
  33. }
  34. </script>
  36. </head>
  38. <body onload="">
  39. <div id="imagesContainer" maximg="2">
  40.  <img src="http://image.radio-france.fr/img/media_planning/fi_60_laportedomenech.gif" alt="1" />
  41.  <img src="http://www.laction.com/imgs/dynamique/journalistes/stephane1.jpg" alt="2" />
  42.  <img src="http://www.fraternite-info.com/IMG/auton13.jpg" alt="3" />
  43.  <img src="http://www.lexpress.mu/images/lexpress_culture.jpg" alt="4" />
  44.  <a href="#">Show all</a>
  45. </div>
  46. </body>
  47. </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
  11.     function showImages() { // Fonction pour afficher les images
  12.        for(var i=maxImages;i<images.length; i++) { //Boucle pour mettre les images apr&egrave;s maxImages en display: inline
  13.        images[i].style.display = 'inline';
  14.        }
  15.     }
  16.    
  17.     function hideImages() {  // Fonction pour masquer les images
  18.        var viewAllImages = document.getElementById("viewAllImages" ); // le lien pour afficher toutes les images
  19.        var imagesContainer = document.getElementById("imagesContainer" );  // le bloc contenant les images
  20.        images = imagesContainer.getElementsByTagName("img" ); // r&eacute;cuperation des tags img contenus dans imagesContainer
  21.        for(var i = maxImages; i < images.length; i++) { // boucle pour masquer les images
  22.            images[i].style.display = 'none';
  23.        }
  24.        viewAllImages.onclick = function() { // &eacute;v&eacute;nement onclick sur le lien viewAllImages
  25.            showImages(); // appel de la fonction showImages()
  26.            return false; // pour d&eacute;sactiver le comportement par d&eacute;faut du lien     
  27.        }
  28.     }
  29.    
  30.     window.onload = function() { // chargement de la fonction hideImage au chargement de la page
  31.        hideImages();
  32.     }
  33.     -->
  34.     </script>
  35.     </head>
  36.     <body>
  37.     <div id="imagesContainer">
  38.     <img src="image.jpg" alt="" />
  39.     <img src="image.jpg" alt="" />
  40.     <img src="image.jpg" alt="" />
  41.     <img src="image.jpg" alt="" />
  42.     </div>
  43.     <p><a href="" id="viewAllImages">Toutes les images</a></p>
  44.     </body>
  45.     </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