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 !