[Dom Scripting] Afficher/masquer des images, problème avec

ced64k · Message par **ced64k** » 21 juin 2006, 11:31

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 : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>showImages</title>
<script type="text/javascript">
<!--
var maxImages = 2; // Nombre d'images maximum à afficher

function showImages() { // Fonction pour afficher les images
	for(var i=maxImages;i<images.length; i++) { //Boucle pour mettre les images après maxImages en display: inline
	images[i].style.display = 'inline';
	}
}

function hideImages() {  // Fonction pour masquer les images
	var viewAllImages = document.getElementById("viewAllImages"); // le lien pour afficher toutes les images
	var imagesContainer = document.getElementById("imagesContainer");  // le bloc contenant les images
	var images = imagesContainer.getElementsByTagName("img"); // récuperation des tags img contenus dans imagesContainer
	for(var i = maxImages; i < images.length; i++) { // boucle pour masquer les images
		images[i].style.display = 'none';
	}
	viewAllImages.onclick = function() { // événement onclick sur le lien viewAllImages
		showImages(); // appel de la fonction showImages()
		return false; // pour désactiver le comportement par défaut du lien	
	}
}

window.onload = function() { // chargement de la fonction hideImage au chargement de la page
	hideImages();
}
-->
</script>
</head>
<body>
<div id="imagesContainer">
<img src="image.jpg" alt="" />
<img src="image.jpg" alt="" />
<img src="image.jpg" alt="" />
<img src="image.jpg" alt="" />
</div>
<p><a href="" id="viewAllImages">Toutes les images</a></p>

</body>
</html>

La page en question

J'ai dû faire un truc de travers, mais je ne vois pas où

Merci

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

Message par **Benoit** » 21 juin 2006, 21:20

La console JavaScript a écrit :Erreur : images is not defined
Fichier source : http://64k.be/download/showImages/
Ligne : 11

Tu voulais peut-être les passer en paramètre ou en faire une variable globale ?

D'autre part, ta fonction onclick est à l'intérieur d'une autre, ça pose peut-être des problèmes de visibilité pour le reste de la page.

lpgc · Message par **lpgc** » 18 juil. 2006, 09:17

bonjour,

Un mois déjà

toujours besoin d'une réponse

Code : Tout sélectionner

<body>

<div id="imagesContainer">
  <img alt src="image.jpg" alt="moi  bébé" width="227" height="186">
  <img alt src="image.jpg" alt="un plateau d'echecs" width="227" height="186">
  <img style="DISPLAY: none" alt="Représente un village ancien" src="image.jpg" width="227" height="186">
  <img style="DISPLAY: none" alt="Un monsieur debout fumant la pipe" src="image.jpg" width="227" height="186">
</div>
</div> 
<p><a href="#" id="viewAllImages">Toutes les images</a></p> 
<!-- <p><a href="javascript:showImages();" id="viewAllImages">Toutes les images</a></p>  -->
</body>

Appliquer le conseil de Benoit ce qui donne :

Code : Tout sélectionner

function idxLink(linkId)
{
	for(i=0;i<document.links.length;i++)
	{
		if (document.links[i].id==linkId)
		{ 
//			alert(document.links[i].innerHTML)
			return i;
		}
	}
	return -1;
}


window.onload = function() { // chargement de la fonction hideImage au chargement de la page 
//   document.links[0].onclick = showImages;
   alert("Vérification NE reload PAS la page  si click sur Toutes les images");
   document.links[idxLink('viewAllImages')].onclick = showImages;
   hideImages(); 
} 
--> 
</script>

Cordialement

Christian

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)

Geckozone

[Dom Scripting] Afficher/masquer des images, problème avec

[Dom Scripting] Afficher/masquer des images, problème avec

Qui est en ligne ?