faire défiler des images dans un tableau

**cyril_bft** · 29/11/2010, 15h03

Bonjour à tous,
Je suis en train d'essayer de faire une page web qui ait l'air de quelque-chose...
Je me suis lancé la semaine dernière et depuis tout se que j'essaie foire lamentablement.
Donc pour ma première page, j'ai fait des tableaux dans tous les sens pour la structurer un peu et ça, ça marche plutôt bien.
Je me suis mis dans la tête qu'on pouvait surement faire défiler des images dans ces tableaux et après beaucoup de recherches, j'ai fait ça dans une des cellules:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<td> <script> function changeimagedivers()
		  for (i=1;i!=5;i++){width="150"> <IMG SRC="../images/divers/img"+i+"1.jpg" height="120" width="150" align="middle">}
		  setTimeout(changeimagedivers(),3000);
		  window.onload = changeimagedivers();
		  </script></td>

Seulement, ça marche pas...
Donc ma question est : peut-on, comme je l'ai fait insérer du script dans une cellule ou est-ce que c'est ma fonction qui est merdique ???

Merci à ceux qui pourront me filer un tuyaux.

**andry.aime** · 29/11/2010, 15h55

Bonsoir et Bienvenue sur Developpez

.

On ne met pas de html dans javascript. Je te conseille de lire d'abord un tutoriel sur javascript, ensuite regarde jQuery Slider.

A+.

**cyril_bft** · 29/11/2010, 16h07

Merci Andry.aime, je me disais bien que je devais une grosse connerie...
Je suis en train de lire "Apprendre le Javascript" ici: http://javascript.developpez.com/tut...re-javascript/ , mais je vais également lire ce que tu me conseilles, j'en ai besoin.
Encore merci et à bientôt, j'aurais surement plein de questions à la con à poser

.

**cyril_bft** · 30/11/2010, 08h56

Bon, après un peu de lecture, j'ai testé ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
          <td width="150"> <script language="javascript"> function changeimagedivers()
		  imagedivers = new Image(150,120);
		  for (i=1;i!=5;i++){ 
		  imagedivers.src = "../images/divers/img"+i+"1.jpg";
		  alert(imagedivers.src);
		  document.write('img src="'+imagedivers.src+'" border="0">');
		  setTimeout(changeimagedivers(),3000);}
		  </script></td>

Mais ça marche pas non plus, ça n'affiche rien du tout dans ma cellule.
Suis-je encore dans la mauvaise direction ???

**andry.aime** · 30/11/2010, 09h14

1-Evite d'utiliser document.write
2-La fonction n'est pas appelée

Utilise jQuery Slider, des codes prêt à l'emploie ici.

A+.

**cyril_bft** · 30/11/2010, 10h38

Salut et merci pour ta réponse.
C'est le principe de "la fonction n'est pas appelée" que je n'arrive pas à comprendre. Le tableau et donc la cellule sont chargés à l'ouverture de la page, la fonction est dans la cellule mais elle, il faut en plus l'appeler pour qu'elle tourne

.

**andry.aime** · 30/11/2010, 11h30

Re,

la fonction est dans la cellule mais elle, il faut en plus l'appeler pour qu'elle tourne

ben, oui

Si tu veux créer les images depuis javascript pendant le chargement de la page,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<td width="150"> <script language="javascript"> 
		  for (i=1;i!=5;i++){ 
		  var src = "../images/divers/img"+i+"1.jpg";
		  document.write('<img src="'+src+'" border="0">');
		  }
		  </script></td>

tu auras 4 images dans ton td.
Mais ce que tu dois faire c'est de ne créer qu'un seul image en lui attribuant un id, lequel tu modifies seulement son src à chaque intervalle de temps.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
// un array pour mettre les images
image = new Array();
for (i=0;i<4;i++){
		  //precharger les images et mettre dans l'array
		  var imagedivers= new Image(150,120);
		  imagedivers.src="../images/divers/img"+(i+1)+"1.jpg";
		  image[i]=imagedivers;
}

Tu peux voir ensuite un exemple ici pour modifier l'index de l'image à chaque intervalle de temps.

Sinon, pourquoi tu ne veux pas ce tuto

A+.

**cyril_bft** · 03/12/2010, 20h17

Bon, j'ai regardé le tuto, mais je vois pas comment enlever les boutons pour faire défiler les images de façon automatique (je sais, je suis pas doué...).
Donc, j'ai essayé différents trucs sur la base des réponses que tu m'as donné andry.aime.
Et là je suis perplexe dans mes essais, j'ai donc une question:

Pourquoi lorsque je fais ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<td width="150"> <script>
var a=0;
function alterner(){
  var i=(a%4)+1;
  alert("image"+i);
  a++;
}
setInterval(function(){alterner();},4000);
</script>
</td>

J'ai bien mes messages qui apparaissent avec la variable qui s'incrémente.
Alors que si je mets ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<td width="150"> <script>
function affiche-divers()
{
i=0;
if (i>=4){i=0}
else {i++}
document.getElementById("images-div").src=imagedivers[i];
alert("image"+i);
setInterval(function(){affiche-divers();},4000);
}
</script>
</td>

à la place du code précédent, mes messages ne s'affichent plus, ce qui me fait penser que la fonction ne se charge pas...
Je ne comprends pas...

**cyril_bft** · 06/12/2010, 13h19

J'ai aussi essayé ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<td width="150"> <script>
function affiche-divers()
{
i=0;
if (i>=4){i=0}
else {i++}
document.getElementById("images-div").src=imagedivers[i];
alert("image"+i);
}
setInterval(function(){affiche-divers();},4000);
</script>
</td>

ça marche pas non plus

.

**andry.aime** · 06/12/2010, 15h33

Bonsoir,

Et si tu nous montre ton code HTML généré?

A+.

**cyril_bft** · 06/12/2010, 15h54

Pas de problème, si ça peut t'aider à me faire comprendre ce qui ne marche pas...

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
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
71
72
73
74
75
76
77
78
79
80
81
 
<!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>...</title>
<style type="text/css">
<!--
body {
	background-color: #990000;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
-->
</style></head>
 
<script>
// un array pour mettre les images
image = new Array();
for (i=0;i<4;i++){
		  //precharger les images et mettre dans l'array
		  var imagedivers= new Image(150,120);
		  imagedivers.src="../images/divers/img"+(i+1)+"1.jpg";
//		  alert(i);
		  image[i]=imagedivers;
}
 
</script>
 
<body>
<table width="988" height="680" border="1">
  <tr>
    <td width="200" height="218"><img src="../images/BBR1(carr&eacute;).gif" width="200" height="200" /></td>
    <td width="772"><img src="../images/BBR1.jpg" width="647" height="116" hspace="60" vspace="0" align="middle" />
      <table width="600" height="120" border="1" align="center">
        <tr>
          <td width="150"> <script>
			function affiche-divers()
			{
			i=0;
			alert("image"+i);
			document.getElementById("images-div").src=imagedivers[i];
			if (i>3){i=0}
			else {i++}
			}
			setInterval(function(){affiche-divers();},4000);
			</script>
		  </td>
          <td width="150"><IMG SRC="../images/divers/img2.jpg" height="120" width="150" align="middle"></td>
          <td width="150"><IMG SRC="../images/divers/img3.jpg" height="120" width="150" align="middle"></td>
          <td width="150"><IMG SRC="../images/divers/img4.jpg" height="120" width="150" align="middle"></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td height="437" valign="top"><p>&nbsp;</p>
    <p>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="147" height="34" title="Test 1">
        <param name="movie" value="test1.swf" />
        <param name="quality" value="high" />
        <param name="bgcolor" value="#000000" />
        <param name="Test 1" value="" />
        <embed src="test1.swf" width="147" height="34" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" bgcolor="#000000"></embed>
      </object>
    </p>
    <p>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="147" height="34" title="Test 2">
        <param name="movie" value="test2.swf" />
        <param name="quality" value="high" />
        <param name="bgcolor" value="#000000" />
        <embed src="test2.swf" width="147" height="34" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" bgcolor="#000000"></embed>
      </object>
    </p></td>
    <td><img src="../images/barnum.gif" width="771" height="450" /></td>
  </tr>
</table>
</body>
</html>

Voila, y a pas grand chose...

**andry.aime** · 06/12/2010, 16h03

document.getElementById("images-div").src=imagedivers[i];

Aucun image n'a cet id.

**cyril_bft** · 06/12/2010, 16h51

Effectivement, j'ai pas bien compris l'explication de la fonction, je pensais qu'elle récupérait l'id de imagedivers[i] et qu'elle la stockait dans "images-div"...
Mais pourquoi mes messages ne s'affichent pas ?

**andry.aime** · 06/12/2010, 17h42

1-Déclare les fonctions dans le head
2-

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script type="text-javascript">

3-Déclare la variable i comme variable globale mais pas local pour la fonction affiche-divers()
4-ajoute un img avec l'id "images-div" car c'est son attribut src que tu vas modifier.

**cyril_bft** · 07/12/2010, 17h01

Merci andry.aime, je pense y être arrivé.
Par contre, je ne comprend pas bien le point 4, je dois utiliser un truc de ce genre ??? :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id='dimage'><img id='image-div' src="../images/img1.jpg" width="150" height="120" style="border-bottom-style:none""></div>

En tout cas merci encore pour ton aide.

**cyril_bft** · 12/12/2010, 12h04

Bon voilà ou en est mon code en ce moment, et les images ne défilent toujours pas

.

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
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
71
72
73
74
75
76
77
78
79
<!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>...</title>
<style type="text/css">
<!--
body {
	background-color: #990000;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
var i;
 
-->
</style>
 
</head>
 
<script type="text-javascript">
function objet() {
this.length = objet.arguments.length
for (var i = 0; i < this.length; i++) this[i+1] = objet.arguments[i]
}
var nom = new objet ("img1.jpg", "img2.jpg", "img3.jpg");
var numero = 1;
function change-divers() {
document.image.src = "../images/divers/"+nom[numero];
numero += 1;
if (numero == nom.length + 1) numero = 1;
setTimeout("change-divers()", 3000);
}
 
</script>
<body onload="change-divers()">
<table width="988" height="680" border="1">
  <tr>
    <td width="200" height="218"><img src="../images/BBR1(carr&eacute;).gif" width="200" height="200" /></td>
    <td width="772"><img src="../images/BBR1.jpg" width="647" height="116" hspace="60" vspace="0" align="middle" />
      <table width="600" height="120" border="1" align="center">
        <tr>
          <td width="150">
		  <script language="javascript">
		  change-divers();
		  </script>
		  <div align="center"><img src="../images/divers/img1.jpg" name="image" width="150" height="120"></div></td>
          <td width="150"><IMG SRC="../images/divers/img2.jpg" height="120" width="150" align="middle"></td>
          <td width="150"><IMG SRC="../images/divers/img3.jpg" height="120" width="150" align="middle"></td>
          <td width="150"><IMG SRC="../images/divers/img4.jpg" height="120" width="150" align="middle"></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td height="437" valign="top"><p>&nbsp;</p>
    <p>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="147" height="34" title="test 1">
        <param name="movie" value="fringues.swf" />
        <param name="quality" value="high" />
        <param name="bgcolor" value="#000000" />
        <param name="test1" value="" />
        <embed src="test1.swf" width="147" height="34" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" bgcolor="#000000"></embed>
      </object>
    </p>
    <p>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="147" height="34" title="test 2">
        <param name="movie" value="test2.swf" />
        <param name="quality" value="high" />
        <param name="bgcolor" value="#000000" />
        <embed src="test2.swf" width="147" height="34" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" bgcolor="#000000"></embed>
      </object>
    </p></td>
    <td><img src="../images/barnum.gif" width="771" height="450" /></td>
  </tr>
</table>
</body>
</html>

ça affiche que l'image dans la balise img...
Pourtant, d'après ce que j'ai lu dans les différentes aides et l'aide de andry.aime, ça devrait marcher.
Merci de votre aide.

**Bovino** · 14/12/2010, 12h32

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

function change-divers()

En JavaScript, "-" signifie l'opération moins. Ta déclaration ne peut pas être interprétée.

**cyril_bft** · 14/12/2010, 12h51

Merci Bovino, je viens de modifier en retirant le "-" pour faire changedivers() et ça ne marche toujours pas

.

**Bovino** · 14/12/2010, 13h39

Pour tout dire, je vois mal l'intérêt de ta fonction objet

Pourquoi ne pas faire simplement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
var nom = ["img1.jpg", "img2.jpg", "img3.jpg"];
var numero = 0;
function changedivers() {
document.image.src = "../images/divers/"+nom[numero];
numero += 1;
if (numero == nom.length) numero = 0;
setTimeout("change-divers()", 3000);
}

**cyril_bft** · 14/12/2010, 14h24

effectivement, mais ça change pas mon problème, les images veulent pas défiler...

faire défiler des images dans un tableau

JavaScript

Discussions similaires

Partager

Partager