faire défiler des images dans un tableau

Version imprimable

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:

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.

29/11/2010, 15h55
andry.aime

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+.
29/11/2010, 16h07
cyril_bft

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 ;).

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

Code:

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 ???

30/11/2010, 09h14
andry.aime

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+.
30/11/2010, 10h38
cyril_bft

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 :?.

Re,

Citation:

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

ben, oui :aie:

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

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:

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 :koi:

A+.

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:

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:

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...

J'ai aussi essayé ça:

Code:

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 :roll:.

06/12/2010, 15h33
andry.aime

Bonsoir,

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

A+.

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

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
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...

06/12/2010, 16h03
andry.aime

Citation:

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

Aucun image n'a cet id.
06/12/2010, 16h51
cyril_bft

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 ?
06/12/2010, 17h42
andry.aime

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

Code:

<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.
07/12/2010, 17h01
cyril_bft

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:

<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.

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

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
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.

14/12/2010, 12h32
Bovino

Code:

function change-divers()

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

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

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

Pourquoi ne pas faire simplement :

Code:

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);
}

14/12/2010, 14h24
cyril_bft

effectivement, mais ça change pas mon problème, les images veulent pas défiler...
14/12/2010, 14h43
Bovino

Code:

<script type="text-javascript">

:nono:

Code:

<script type="text/javascript">
15/12/2010, 12h55
cyril_bft

Enorme :merci: à Bovino et andry.aime ainsi qu'à tout ceux qui ont eu la patience de me lire.

:resolu: