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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
| <!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
</head>
<body onload = "ListeAlterne(0)">
<!--Bloc conteneur des images-->
<div class="tp_block" id = "image_change" >
<img alt="" src="Images_nav/Diapo_auto_B3.png" class="image"> <img alt="" src="Images_nav/Diapo_auto_B6.png" class="image"> <img alt="" src="Images_nav/Diapo_auto_B9.png" class="image">
</div>
<script type="text/javascript">
var tab_images = [];
// première liste d'image qui correspond à celle affichée dans le html
tab_images.push(["Images_nav/Diapo_auto_B3.png","Images_nav/Diapo_auto_B6.png","Images_nav/Diapo_auto_B9.png"]);
// deuxième liste d'image qui remplacera la première
tab_images.push(["Images_nav/Diapo_droit_B3.png","Images_nav/Diapo_droit_B6.png","Images_nav/Diapo_droit_B9.png"]);
// troisième liste d'image qui remplacera la seconde
tab_images.push(["Images_nav/Diapo_gauche_B3.png","Images_nav/Diapo_gauche_B6.png","Images_nav/Diapo_gauche_B9.png"]);
// quatrième liste d'image qui remplacera la troisième
// etc.
// nombre de lignes du tableau
var tab_lignes_length = tab_images.length;
// Cible les images du bloc ayant l'id "image_change"
var div_change = document.getElementById("image_change");
var img_change = div_change.getElementsByTagName('img');
// Nombre d'images contenues dans le bloc
var img_change_length = img_change.length;
function Alterne(i,incr){
incr = incr < tab_lignes_length ? incr : 0;
//L'image est ciblée par son index i dans le bloc, le même index "i" défini l'image remplaçante dans la ligne du tableau, et "incr" correspond à la ligne du tableau ("incr" est incrémentée par les rappels successifs de setTimeout)
img_change[i].src = tab_images[incr][i];
incr++;
setTimeout(function(){Alterne(i,incr)},2000);
}
function ListeAlterne (incr)
{
// On appelle la fonction Alterne pour chaque image du bloc. i correspond à l'index (=position) de l'image dans le bloc, incr est utilisé pour incrémenter les lignes du tableau des images remplaçantes
for (var i = 0; i < img_change_length; i++)
{
Alterne(i,incr);
}
}
</script>
</body>
</html> |
Code pour changer des images
Répondre avec citation
Partager