Bonsoir Sopo, bonsoir Alan :
Sopo Merci, ta réponse m’était précieuse, effectivement ca marche 5 Alan je vais de ce pas essayer ce que tu propose ), mais hélas je rencontre un autre problème avec le JavaScript, je vous explique ... vu que j’ai donc deux différentes galeries de photos :
1 - la première avec les « mini images » en horizontales en haut :
http://cenestquuntest.site.voila.fr/galerie01.php
2 - la seconde avec les « mini images » verticales à gauche :
http://cenestquuntest.site.voila.fr/galerie02.php sur ma feuille CSS ( je dois avoir une seule feuille de style ) et pour avoir deux styles différent (l’un horizontal l’autre vertical) j’ai fait laissé pour la première galerie les ID du Tuto : (#galerie, #photo …) et pour la deuxième j’ai crée de nouveaux ID (#galerie_v, #photo_v …) qui vont avec les div sur le fichier galerie02.php ... et jusque là tout marche bien
Mon problème est avec le JavaScript, une fois que les ID sur la 2eme galerie ont étés changés j’ai crée une nouveau fichier : script_v.js et j’ai essayé de changer les ID dedans aussi mais ca ne marche pas, donc quand je clique sur les photos de la 2eme galerie, elles ne s’ouvrent pas DANS le cadre, ( en fait elle tiennent pas compte du Java script ) que dois-je modifier SUR le JavaScript pour que ca marche ?
Voilà les codes de la 2eme Galerie :
HTML/PHP:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="script_v.js"></script>
</head>
<body>
Galerie 2
<br/><br/>
<div id="galerie_v">
<ul id="galerie_mini">
<li><a href="images/photo1.png" title="Titre de la photo 1"><img src="images/minis/m_photo1.png" alt="Le titre de la photo 1" /></a></li>
<li><a href="images/photo2.png" title="Titre de la photo 2"><img src="images/minis/m_photo2.png" alt="Le titre de la photo 2" /></a></li>
<li><a href="images/photo3.png" title="Titre de la photo 3"><img src="images/minis/m_photo3.png" alt="Le titre de la photo 3" /></a></li>
<li><a href="images/photo4.png" title="Titre de la photo 4"><img src="images/minis/m_photo4.png" alt="Le titre de la photo 4" /></a></li>
<li><a href="images/photo5.png" title="Titre de la photo 5"><img src="images/minis/m_photo5.png" alt="Le titre de la photo 5" /></a></li>
<li><a href="images/photo6.png" title="Titre de la photo 6"><img src="images/minis/m_photo6.png" alt="Le titre de la photo 6" /></a></li>
<li><a href="images/photo7.png" title="Titre de la photo 7"><img src="images/minis/m_photo7.png" alt="Le titre de la photo 7" /></a></li>
<li><a href="images/photo8.png" title="Titre de la photo 8"><img src="images/minis/m_photo8.png" alt="Le titre de la photo 8" /></a></li>
<li><a href="images/photo9.png" title="Titre de la photo 9"><img src="images/minis/m_photo9.png" alt="Le titre de la photo 9" /></a></li>
<li><a href="images/photo10.png" title="Titre de la photo 10"><img src="images/minis/m_photo10.png" alt="Le titre de la photo 10" /></a></li>
</ul>
<dl id="photo_v">
<dt>Twin Palmers</dt>
<dd><img id="big_pict" src="images/photo1.png" alt="Twin Palmers" /></dd>
</dl> <br/>
<p id="clear"></p>
</div>
</body>
</html>
CSS :
/* galerie avec les images verticales */
div#galerie_v {
width: 550px;
height: 550px;
border: 1px solid #666666;
text-align: center;
background-color: #FF00FF;
}
ul#galerie_mini_v {
margin: 0 ;
padding: 0 ;
list-style-type: none ;
float: left;
}
dl#photo_v {
margin-left: 55px;
}
dl#photo_v dt {
color: #666666;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: 40px;
}
dl#photo_v dd {
margin: 0 ;
text-align: center;
}
JS :
function displayPics()
{
var photos = document.getElementById('galerie_mini_v') ;
// On récupère l'élément ayant pour id galerie_mini
var liens = photos.getElementsByTagName('a') ;
// On récupère dans une variable tous les liens contenu dans galerie_mini
var big_photo = document.getElementById('big_pict') ;
// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
// Et enfin le titre de la photo de taille normale
// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
for (var i = 0 ; i < liens.length ; ++i) {
// Au clique sur ces liens
liens[i].onclick = function() {
big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
big_photo.alt = this.title; // On change son titre
titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo
return false; // Et pour finir on inhibe l'action réelle du lien
};
}
}
window.onload = displayPics;
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
Les fichiers correspondants
http://cenestquuntest.site.voila.fr/galerie02.php
http://cenestquuntest.site.voila.fr/script_v.js
http://cenestquuntest.site.voila.fr/style.css
[/i]
Modifié par bettina (20 Aug 2006 - 00:03)
personne ne m’a répondu, et j’ai vraiment besoin de la réponse 
