Bonjour,
Je début avec javascript.
J'ai trouvé un tutoriel Javascript pour réaliser une galerie d'images.
ça donne côté html:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31 <HTML> <HEAD> <SCRIPT> <script type=\"text/javascript\" src=\"script.js\"></script> </SCRIPT> </HEAD> <BODY> <div id="galerie"> <ul id="galerie_mini"> <li> <a href="images/photo1.jpg" title="Titre de la photo 1"><img src="images/minis/m_photo1.jpg" alt="Le titre de la photo 1" /></a> </li> <li> <a href="images/photo2.jpg" title="Titre de la photo 2"><img src="images/minis/m_photo2.jpg" alt="Le titre de la photo 2" /></a> </li> <li> <a href="images/photo3.jpg" title="Titre de la photo 3"><img src="images/minis/m_photo3.jpg" alt="Le titre de la photo 3" /></a> </li> <li> </li> </ul> <dl id="photo"> <dt>"Titre photo 1"</dt> <dd><img id="big_pict" src="images/photo1.jpg" alt="Photo 1 en taille normale" /></dd> </dl> </div> </BODY> </HTML>
et niveau fichier .js :
je précise qu'en ce qui concerne le script js je l'ai mis tel quel dans le fichier : la mise en forme est elle correcte?
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26 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 }; } } // Il ne reste plus qu'à appeler notre fonction au chargement de la page window.onload = displayPics;
Manque t-il quelque chose pour établir le lien entre ma page html et le fichier?
La page html ne semble pas en lien avec le fichier...
quelqu'un verrait-il où ça cloche??
Merci par avance pour votre aide!
Partager