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
32
33
34
| function display_img()
{
// On assigne à la variable "links" tous les éléments de la page qui ont un <a> pour balise, soit les liens, ce qui correspond à toutes les photos de notre galerie :
var links = document.getElementsByTagName('a');
// On récupère l'élément ayant pour identifiant "img_originale" (c'est notre photo en taille normale) que l'on affecte à la variable "big_photo" :
var big_photo = document.getElementById('img_orig');
// On récupère le titre de la photo de taille normale, que l'on affecte à la variable "titre-photo" :
var titre_photo = document.getElementsByTagName('h2')[0];
// On effectue une boucle parcourant l'ensemble des liens contenu dans "minis" :
for (var i = 0 ; i < links.length ; ++i) {
// Dès que l'utilisateur clique sur ces liens :
links[i].onclick = function() {
// On change l'attribut src de la grande image en le remplaçant par la valeur du lien :
big_photo.src = this.href;
// De même pour le texte alternatif :
big_photo.alt = this.alt;
// De même pour le commentaire info-bulle :
big_photo.title = this.title;
// On change le titre h2 de la grande photo :
titre_photo.firstChild.nodeValue = this.title;
// Et on s'assure que l'action réelle du lien ne sera pas exécutée :
return false;
};
}
}
// Enfin, on appelle la fonction "display_img" au chargement de la page :
window.onload = display_img; |
