swap d'images [résolu]

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : swap d'images [résolu]

Papy Brossard

Salut à tous.

Je suis en train de me battre avec du javascript et je m'en sors donc je viens demander conseil. Voilà ce que je veux :
j'ai neuf images (des miniatures) dans un cadre et j'aimerais que lorsqu'on clique sur une image, elle s'affiche en gros dans le cadre, et que lorsqu'on reclique sur la grande image, la page soit restaurée (cad que les minitaure reviennent).

Quelqu'un pourrait me dire quelle serait la maniere la plus élégante de faire ce genre de chose ?

Merci.

Message édité par Papy Brossard le 26-07-2005 à 08:45:37

Publicité

gatsusat

on peu avoir un bout de ton code ?????

sinon tu as exactement ce que tu recherche ici :

http://css.alsacreations.com/Tutor [...] javascript

Papy Brossard

Coucou

ça fait pas exactement ce que je veux puisque j'aimerais que la liste des images à agrandir soit affichée seule et revienne une fois qu'une "grande" image a été vue (et que l'utilisateur clique).

Je vais ajouter le code :

le css :

Code :

/* Ajout des cadres dans le cadre rangeeUn */
ul#rangeeUn {
margin-top: 6px;
list-style-type: none;
width: 470px;
height: 92px;
}
ul#rangeeUn li {
display: inline;
text-align: center;
}
ul#rangeeUn li a {
width: 139px;
height: 91px;
float:left;
margin-left: 15px;
background-image: url(../images/cadre.png);
background-repeat:no-repeat;
}

et le html ou y'a les miniatures :

Code :

<div class="cadreContenu">
<div class="contenu" id="contenu">
<ul id="rangeeUn">
<li"><a><img src="toto.JPG" alt="toto" /></a></li>
<li><a><img src="titi.JPG" alt="toto" /></a></li>
<li><a><img src="tata.JPG" alt="toto" /></a></li>
</ul>
<ul id="rangeeDeux">
<li><a><img src="tutu.JPG" alt="toto" /></a></li>
<li><a><img src="tete.JPG" alt="toto" /></a></li>
<li><a><img src="tyty.JPG" alt="toto" /></a></li>
</ul>
<ul id="rangeeTrois">
<li><a><img src="toto2.JPG" alt="toto" /></a></li>
<li><a><img src="titi2.JPG" alt="toto" /></a></li>
<li><a><img src="tata2.JPG" alt="toto" /></a></li>
</ul>
<ul id="rangeeQuatre">
<li><a><img src="tutu2.JPG" alt="toto" /></a></li>
<li><a><img src="tete2.JPG" alt="toto" /></a></li>
<li><a><img src="tyty2.JPG" alt="toto" /></a></li>
</ul>
</div>
</div>

Donc en gros, ce que je voudrais c'est que lorsqu'on clique sur une image, elle occule toutes les miniatures et s'affiche seule dans le div <div class="contenu" id="contenu">.

Je suis assez clair ?

Merci d'avance !

gatsusat

tu peux virer class="contenu" puisque tu peux ajouter tes styles directement sur contenu
et idem pour tes id de rangéestrucmuche sur les UL ca sert à rien du tout

m'enfin bon tu fais comme tu veux mais ce code là marche :

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style>
#cadreGallerie{
width:300px;
height:200px;
border: 1px solid red;
}
#cadreGallerie DIV{
}
#cadreGallerie UL{
border: 1px solid black;
float:left;
margin:0;
padding:0;
clear:both;
width:200px;
margin-left:auto;
margin-right:auto;
list-style:none;
}
#cadreGallerie UL LI {
float:left;
text-align: center;
margin:auto;
}
#cadreGallerie UL LI A{
display: block;
}
#cadreGallerie UL LI A IMG{
width:50px;
height:50px;
border:none;
}
#cadreGallerie IMG{
border:none;
cursor:pointer;
}
#imageGallerie{
display: none;
width:100%;
height:100%;
}
</style>
<script>
function gallery(){
var MaGallery = document.getElementById("cadreGallerie" );
var contenu = MaGallery.getElementsByTagName("DIV" ); //On récupère le div qui contient tous les UL
var LiensImg = MaGallery.getElementsByTagName("A" ) //on recupère toutes les images de la gallery
for (var i=0; i<LiensImg.length-1; i++) //on parcours tous les liens des images de la gallery et pour un lien trouvé on lui rajoute une fonction
LiensImg[i].onclick = function(){
var MaGallery = document.getElementById("cadreGallerie" );
var ULGal = MaGallery.getElementsByTagName("UL" );
for(var i=0; i<ULGal.length; i++) ULGal[i].style.display = "none";
var image = MaGallery.getElementsByTagName("IMG" )[0]; //On récupère la première image
image.src = this.href;
image.alt = this.getElementsByTagName("IMG" )[0].alt;
image.title = this.getElementsByTagName("IMG" )[0].title;
image.onclick = function(){
var MaGallery = document.getElementById("cadreGallerie" );
var ULGal = MaGallery.getElementsByTagName("UL" );
for(var i=0; i<ULGal.length; i++) ULGal[i].style.display = "block";
this.style.display = "none";
}
image.style.display = "block";
return false;
}
}
window.onload = gallery;
</script>
</head>
<body>
<div id="cadreGallerie">
<img id="imageGallerie">
<div>
<ul>
<li><a href="toto.JPG"><img src="toto.JPG" alt="toto" /></a></li>
<li><a href="titi.JPG"><img src="titi.JPG" alt="titi" /></a></li>
<li><a href="tata.JPG"><img src="tata.JPG" alt="tata" /></a></li>
</ul>
<ul>
<li><a href="#"><img src="tutu.JPG" alt="toto" /></a></li>
<li><a href="#"><img src="tete.JPG" alt="toto" /></a></li>
<li><a href="#"><img src="tyty.JPG" alt="toto" /></a></li>
</ul>
<ul>
<li><a href="#"><img src="toto2.JPG" alt="toto" /></a></li>
<li><a href="#"><img src="titi2.JPG" alt="toto" /></a></li>
<li><a href="#"><img src="tata2.JPG" alt="toto" /></a></li>
</ul>
<ul>
<li><a href="#"><img src="tutu2.JPG" alt="toto" /></a></li>
<li><a href="#"><img src="tete2.JPG" alt="toto" /></a></li>
<li><a href="#"><img src="tyty2.JPG" alt="toto" /></a></li>
</ul>
</div>
</div>
</body>
</html>

PS : mes petites mains pottelées sont généreuses en ce moment

Message édité par gatsusat le 24-07-2005 à 19:49:18

Papy Brossard

ça marche plutot bien mais j'ai u peu de mal à le mettre à ma sauce. Enfin, j'y arrive mais les images s'affichent pas quand on clique dessus (j'ai le texte alternatif).
Une explication ? :jap:

Edit : en fait ça marche, je me suis débrouill:é comme une burne au déut, c'est tout.
Merci bcp gatsuat. Et puis grace à toi, je peux me venter d'avoir du code de pro

Message édité par Papy Brossard le 26-07-2005 à 08:45:18

FORUM HardWare.fr

Programmation

HTML/CSS

swap d'images [résolu]

Sujets relatifs
Applet pour un menu circulaire avec images ?	[Resolu]Moteur de recherche basique
[prog PHP][resolu] Faire un PHP qui archive un site	[RESOLU] Envoi de POST vers un autre serveur avec HEADER
[Résolu] simple requete en VBA :)	[Résolu] Redimensionner une image externe
[php] récupérer plusieurs arguments [RESOLU]	[VBA][résolu]comment interrompre ma macro pour modifier une feuille
Probléme avec method="post" et "get" (Résolu )	[Resolu]Header already sent : Je ne trouve pas malgré mes recherches
Plus de sujets relatifs à : swap d'images [résolu]

Page générée en 0.094 secondes