Code pour changer des images

Version imprimable

Bonjour,

J'ai un problème avec un code qui va me servir à changer d'images toutes les 2 secondes.

Voici le code en question :

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>
<body onload="alterne();">
 
 <img alt="" src="image0.jpg" class="tp_image01"> 
 
 <script type="text/javascript"> 
 <!-- 
var img0="images/tp_image01.gif";
 var img1="images/tp_image02.gif";
 var img2="images/tp_image03.gif";
 var img3="images/tp_image04.gif";
 
 var i=0; 
 function alterne(){ 
 i++; 
 if (i==6) {i=0} 
 document.images[0].src=eval("img"+i); 
 setTimeout("alterne()", 2000); // 2000 est une valeur en millisecondes
 } 
 //--> 
 </script>
 </body>
</html>

Je l'ai insérer dans ma page mais ca ne marche pas et en plus ca fait beuger la page, pouvez-vous m'aider à insérer ce code correctement ?

Voici comment je l'ai insérer :

Code:

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
<body onload="alterne();">
<div id="mainblock">
  <!--inner block starts here -->
  <div id="innerblock">
    <div id="toppanel">
      <div align="left"><img src="images/tp_logo.gif" width="238" height="54" alt="" class="tp_logo" /> <img src="images/tp_shopping_img.gif" width="13" height="11" alt="" class="tp_shopping_img" /> <a href="http://cosmetiques-aloevera.com/panier.php" class="tp_txt1">Mon panier <br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0 article(s)</a> <a href="http://cosmetiques-aloevera.com/connexion.php" class="tp_txt2">• Connexion <br />
  • S'enregistrer</a>
      </div>
      <div class="tp_menu_tile"> <a href="http://cosmetiques-aloevera.com/index.php" class="tp_menu1">Acceuil</a> <img src="images/tp_divider.gif" width="2" height="39" alt="" class="tp_divider" /> <a href="http://cosmetiques-aloevera.com/nouveautes.php" class="tp_menu2">Nouveautés</a> <img src="images/tp_divider.gif" width="2" height="39" alt="" class="tp_divider" /> <a href="http://cosmetiques-aloevera.com/promos.php" class="tp_menu2">Promos</a> <img src="images/tp_divider.gif" width="2" height="39" alt="" class="tp_divider" /> <a href="http://cosmetiques-aloevera.com/faq.html" class="tp_menu2">FAQ</a> <img src="images/tp_divider.gif" width="2" height="39" alt="" class="tp_divider" /> <a href="http://cosmetiques-aloevera.com/qui-sommes-nous.php" class="tp_menu2">Qui sommes-nous ?</a> <img src="images/tp_divider.gif" width="2" height="39" alt="" class="tp_divider" /> <a href="http://cosmetiques-aloevera.com/blog.php" class="tp_menu2">Blog</a> </div>
      <div class="tp_tile2"> <img src="images/tp_btn1.gif" width="15" height="15" alt="" class="tp_btn1" />
        <p class="tp_heading">À Découvrir</p>
      </div>
      <div class="tp_block">
       <img alt="" src="images/tp_image01.gif" width="140" height="135" class="tp_image01"> 
 
<script type="text/javascript"> 
<!-- 
var img0="images/tp_image05.gif";
var img1="images/tp_image06.gif";
var img2="images/tp_image07.gif";
 
var i=0; 
function alterne(){ 
i++; 
if (i==6) {i=0} 
document.images[0].src=eval("img"+i); 
setTimeout("alterne()", 2000); // 2000 est une valeur en millisecondes
} 
//--> 
</script>
      </div>

Je vous remercie d'avance.

Salut,

Ton code n'est pas top car il demande d'être complètement modifié si tu change le nombre d'images et d'autre part l'image est ciblée avec un index.

Le plus simple est de définir un id pour l'image cible (que j'ai nommé "image_change") et de définir un tableau d'images (que j'ai nommé "tab_images"), par exemple :

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
</head>
 
<body onload = "Alterne(0)">
<div id="mainblock">
  <!--inner block starts here -->
  <div id="innerblock">
    <div id="toppanel">
      <div align="left"><img src="images/tp_logo.gif" width="238" height="54" alt="" class="tp_logo" /> <img src="images/tp_shopping_img.gif" width="13" height="11" alt="" class="tp_shopping_img" /> <a href="http://cosmetiques-aloevera.com/panier.php" class="tp_txt1">Mon panier <br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0 article(s)</a> <a href="http://cosmetiques-aloevera.com/connexion.php" class="tp_txt2">? Connexion <br />
  ? S'enregistrer</a>
      </div>
      <div class="tp_menu_tile"> <a href="http://cosmetiques-aloevera.com/index.php" class="tp_menu1">Acceuil</a> <img src="images/tp_divider.gif" width="2" height="39" alt="" class="tp_divider" /> <a href="http://cosmetiques-aloevera.com/nouveautes.php" class="tp_menu2">Nouveautés</a> <img src="images/tp_divider.gif" width="2" height="39" alt="" class="tp_divider" /> <a href="http://cosmetiques-aloevera.com/promos.php" class="tp_menu2">Promos</a> <img src="images/tp_divider.gif" width="2" height="39" alt="" class="tp_divider" /> <a href="http://cosmetiques-aloevera.com/faq.html" class="tp_menu2">FAQ</a> <img src="images/tp_divider.gif" width="2" height="39" alt="" class="tp_divider" /> <a href="http://cosmetiques-aloevera.com/qui-sommes-nous.php" class="tp_menu2">Qui sommes-nous ?</a> <img src="images/tp_divider.gif" width="2" height="39" alt="" class="tp_divider" /> <a href="http://cosmetiques-aloevera.com/blog.php" class="tp_menu2">Blog</a> </div>
      <div class="tp_tile2"> <img src="images/tp_btn1.gif" width="15" height="15" alt="" class="tp_btn1" />
        <p class="tp_heading">À Découvrir</p>
      </div>
      <div class="tp_block">
       <img id = "image_change" alt="" src="images/tp_image05.gif" class="tp_image01"> 
       </div>
	</div>
   </div>
</div>
 
<script type="text/javascript"> 
 
var tab_images = ["images/tp_image05.gif","images/tp_image06.gif","images/tp_image07.gif"];
var image_change = document.getElementById("image_change");
 
var tab_images_length = tab_images.length;
 
function Alterne(incr){
 
	incr = incr < tab_images_length ? incr : 0;
 
	image_change.src = tab_images[incr];
 
	incr++;
 
	setTimeout(function(){Alterne(incr)},2000); 
}
 
</script>
 
</body>
</html>

Ainsi en cas de changement, du tableau d'images ou de l'image cible à changer, tu n'auras que les deux premières lignes du code javascript à modifier.

Bonjour,

merci de votre réponse. Par contre je bloque sur un truc.

J'ai une ligne de 3 images sur une page et je voudrais que chacune d'elles change avec d'autres images donc voici le code que j'ai fait ci-dessous. Le problème est que seule la dernière image change et les autres ne changent pas. D'où peut provenir l'erreur ?

Code:

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
<html>
<!-- Start changement images section -->
<script>
window.onload= defilImg
current_img = 0;
arrImg = ['images/tp_image01.gif','images/tp_image05.gif','images/tp_image06.gif','images/tp_image07.gif']
 
 
function defilImg(){
  if(current_img == arrImg.length)
  current_img = 0;
  document.getElementById('toto').src = arrImg[current_img++];
  window.setTimeout('defilImg()',2000);
}
</script>
<!-- fin changement images section -->
<!-- Start changement images section -->
<script>
window.onload= defilImg
current_img = 0;
arrImg = ['images/tp_image02.gif','images/tp_image14.gif','images/tp_image15.gif','images/tp_image16.gif']
 
 
function defilImg(){
  if(current_img == arrImg.length)
  current_img = 0;
  document.getElementById('lolo').src = arrImg[current_img++];
  window.setTimeout('defilImg()',2000);
}
</script>
<!-- fin changement images section -->
<!-- Start changement images section -->
<script>
window.onload= defilImg
current_img = 0;
arrImg = ['images/tp_image03.gif','images/tp_image08.gif','images/tp_image09.gif','images/tp_image10.gif']
 
 
function defilImg(){
  if(current_img == arrImg.length)
  current_img = 0;
  document.getElementById('momo').src = arrImg[current_img++];
  window.setTimeout('defilImg()',2000);
}
</script>
<!-- fin changement images section -->
<body>
 
<img id='toto' src='images/tp_image01.gif'/>
<br />
<img id='lolo' src='images/tp_image02.gif'/>
<br />
<img id='momo' src='images/tp_image03.gif'/>
 
</body>
</html>

Nan faut se débrouiller pour pouvoir réutiliser les fonctions (sans besoin de les réécrire).

Je donne un exemple ci-dessous. J'ai documenté le code, mais attention j'ai testé avec des images perso, il faudra changer l'adresse des images dans le html et dans le tableau javascript.

Code:

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>

Alors t'as testé et compris ?

Remarque que le code que j'ai donné est court mais pas optimisé.
En fait avec cette méthode j'envoie autant de setTimeout qu'il y a d'images à changer.
Le visiteur ne verra pas d'inconvénient au départ mais à la longue les timer pourraient se désynchroniser et produire un petit décalage dans le changement des images. Il faudrait de longues minutes ce qui fait que le code est fonctionnel pour un usage courant, mais bon si on peut faire mieux pour pas plus cher...

Pour n'envoyer qu'un setTimeout il suffit de lister le tableau dans la première fonction et les images dans la seconde. Ce qui donne :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function Alterne (incr){ for (var i = 0; i < img_change_length; i++){ img_change[i].src = tab_images[incr][i]; } } function ListeAlterne (incr){ // On appelle la fonction Alterne pour chaque ligne du tableau incr = incr < tab_lignes_length ? incr : 0; Alterne(incr); incr++; setTimeout(function(){ListeAlterne(incr)},2000); }
(Le reste du code est inchangé)
Ainsi on économise les ressources du navigateur (un seul setTimeout) et le changement des images ne risque pas de se désynchroniser :D

11/04/2015, 09h18
QQn91

Bonjour,

merci je vais tester tout ça et j'en dirais des nouvelles.
11/04/2015, 10h06
QQn91

Alors je l'ai essayé quand je le mets dans une page vierge il fonctionne très bien, par contre quand je l'intègre dans ma page index déjà existante ca ne marche pas et ca fait beuger la page.

Salut,

Soit c'est un conflit avec d'autres scripts javascript de ta page, soit tu as fais une erreur en intégrant le code.

Pour éviter les conflits on peut commencer par essayer de ne pas utiliser le onload de la balise body. On le remplacera par un écouteur d'évènement sur le onload de window que l'on assigne avec "addEventListener" comme ci-dessous :

Code:

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
65
66
67
68
69
70
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
</head>
 
<body>
 
      <!--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 (incr)
{
	for (var i = 0; i < img_change_length; i++)
	{
		img_change[i].src = tab_images[incr][i];
	}	
}
 
function ListeAlterne (incr)
{
	// On appelle la fonction Alterne pour chaque ligne du tableau
	incr = incr < tab_lignes_length ? incr : 0;
 
	Alterne(incr);
 
	incr++;
	setTimeout(function(){ListeAlterne(incr)},2000);
}
 
if (window.addEventListener){
  window.addEventListener('onload', ListeAlterne(0), false);
} else if (window.attachEvent) {// pour IE anciennes versions
  window.attachEvent('onload', ListeAlterne(0));
}
</script>
 
</body>
</html>

11/04/2015, 20h12
QQn91

Voilà c'est exactement ça, cela me fait un conflit avec les autres script et je crois que c'est à cause du onload.
11/04/2015, 20h14
QQn91

Je vais essayer cette solution alors.