Afficher/masquer des images, problème avec un return false

Question

cedb3

21 Jun 2006 à 11:10

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 :


<!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>

[/i][/i]
La page en question

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

Merci
Modifié par cedb3 (21 Jun 2006 - 11:11)

Sujet clos