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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [Résolu] [DOM Scripting] Afficher/masquer des images

ced64k

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 :

<!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ù :sweat:

Merci

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

Publicité

xtof_83

Freeride Spirit

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

gatsu35

Blablaté par Harko

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 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.hideall img {display:none;}
.hideall img.show {display:inline;}
.hideall a {display:block}
.showall img {display:inline;}
</style>
<script type="text/javascript">
function hideall(imgctnid) {
var imgctn = document.getElementById(imgctnid); //on recupere le bloc
var maxImg = imgctn.getAttribute("maximg" ); //on recupere le nombre d'images a afficher
imgctn.className="hideall"; // on cache toutes les images via une classe
var img = imgctn.getElementsByTagName("img" ); //on recuperes toutes les img
for (var i=0; i<maxImg && i<img.length; i++) { //on parcours les img seulement le nombre maximum indique
img[i].className="show"; //on affiche les images
}
var a = imgctn.getElementsByTagName("a" )[0];
a.onclick = function () {
var imgctn = this;
while(imgctn.className.indexOf("hideall" )==-1) imgctn = imgctn.parentNode; //on recupere le bloc parent
if (!imgctn) return;
imgctn.className="showall"; //on affiche toutes les images
this.parentNode.removeChild(this); //on vire le lien qui ne sert plus a rien
}
}
window.onload = function() {
hideall('imagesContainer');
}
</script>
</head>
<body onload="">
<div id="imagesContainer" maximg="2">
<img src="http://image.radio-france.fr/img/media_planning/fi_60_laportedomenech.gif" alt="1" />
<img src="http://www.laction.com/imgs/dynamique/journalistes/stephane1.jpg" alt="2" />
<img src="http://www.fraternite-info.com/IMG/auton13.jpg" alt="3" />
<img src="http://www.lexpress.mu/images/lexpress_culture.jpg" alt="4" />
<a href="#">Show all</a>
</div>
</body>
</html>

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

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

gatsu35

Blablaté par Harko

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 :

<!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 a afficher
var images; // var globale
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
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>

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

ced64k

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

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
[RESOLU]Créer ma barre d'outil avec VB	[RESOLU] Problème méthode GET
Composant pour afficher une liste de fichiers	STL utilisation de merge() pour des listes [resolu]
Optimisation d'images	[Resolu]Probleme de JScrollPane et JtextArea
[ADO .NET][RESOLU] Remplir un DataGridView avec un Datareader ?	Avoir deux styles d'images différentes
[résolu]Probleme sous Visual Studio avec FILE	[PHP] [RESOLU] problème de filtre sur la date dans requête
Plus de sujets relatifs à : [Résolu] [DOM Scripting] Afficher/masquer des images

Page générée en 0.096 secondes