Salut à tous,
Malgré les nombreux postes sur le forum, je ne trouve pas la solution à mon probleme, a savoir que quan je clique sur les miniatures, cela m'affiche ma photo grandeur nature.
Alors est ce que je suis con et de toute façon ça marche que comme ça ou alors j'ai fait quelque chose de travers (je penche pour la deuxieme soluce
..
J'ai bien mis mon fichier JS qui se nomme script.js dans mon répertoire.
Merci de m'aider et désolé si c'est une question débile
Voici mon code:
Malgré les nombreux postes sur le forum, je ne trouve pas la solution à mon probleme, a savoir que quan je clique sur les miniatures, cela m'affiche ma photo grandeur nature.
Alors est ce que je suis con et de toute façon ça marche que comme ça ou alors j'ai fait quelque chose de travers (je penche pour la deuxieme soluce
..J'ai bien mis mon fichier JS qui se nomme script.js dans mon répertoire.
Merci de m'aider et désolé si c'est une question débile
Voici mon code:
<div id="galerie">
<ul id="galerie_mini">
<li><a href="photos/photos 022.jpg" title="Titre de la photo 1"><img src="photos_mini/photos 022.jpg" alt="Le titre de la photo 1" /></a></li>
</ul>
<dl id="photo">
<dt>Titre de la photo 1</dt>
<dd><img id="big_pict" src="photos_mini/photos 022.jpg" alt="Photo 1 en taille normale" width=300 height=150 /></dd>
</dl>
</div>
div#galerie {
position:relative;
width: 410px ;
left:100px;
background: white ;
border: 1px solid #dcb ;
padding: 15px ;
margin: 15px 30px ;
text-align: center ;
font: 0.9em Georgia, serif ;
color:black;
}
ul#galerie_mini
{
margin: 0 ;
padding: 0 ;
list-style-type: none ;
}
ul#galerie_mini li
{
float: left ;
}
ul#galerie_mini li a img
{
margin: 2px 1px ;
border: 1px solid #dcb ;
}
dl#photo
{
clear: both ;
margin: 0 auto ;
}
dl#photo dt
{
font: italic 2.5em/1.5em Georgia, serif ;
color: #dcb ;
}
dl#photo dd
{
margin: 0 ;
}
dl#photo img
{
border: 1px solid #dcb ;
}
function displayPics()
{
var photos = document.getElementById('galerie_mini') ;
// 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
