Discussion :

[lau_1611]

Bonjour,
je cherche de l'aide pour réaliser la page d'accueil d'un site. Je voudrais mettre deux bandeaux d'images qui défilent chacun avec leur propre flêche de défilement. Si je ne mets qu'un seul bandeau cela fonctionne parfaitement par contre si j'essai de mettre 2 fois le script je n'y arrive plus.
Je ne suis pas connaisseuse de JavaScript et j'i fait beaucoup de recherche sur le web mais ne trouvant pas la solution je me tourne vers vous.

Code Javascript :

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
var initialisation = false
var vitesse = 10;
var temps = 0;
 
var contenu = null;
var longueur = 0;
var cadre = 480;
 
function aller_gauche()
{
INIT();
 
if( parseInt( contenu.style.left ) > (cadre - longueur) )
{
contenu.style.left = Math.max(cadre - longueur, parseInt( contenu.style.left ) - vitesse);
temps = setTimeout(aller_gauche, 40);
}
}
 
function aller_droite()
{
INIT();
 
if( parseInt( contenu.style.left ) < 0 )
{
contenu.style.left = Math.min(0, parseInt( contenu.style.left ) + vitesse);
temps = setTimeout(aller_droite, 40);
}
}
 
function placement_fin()
{
INIT();
STOP();
contenu.style.left = 0;
}
 
function placement_debut()
{
INIT();
STOP();
contenu.style.left = cadre - longueur;
}
 
function STOP()
{
if( temps )
{
clearTimeout(temps);
temps = 0;
}
}
 
function INIT()
{
if( !initialisation )
{
contenu = document.getElementById( "content" )
 
var obj = document.getElementById( "container" );
if( obj )
{
longueur = obj.scrollWidth;
cadre = obj.clientWidth;
}
 
initialisation = true;
}
}

Code HTML :

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
<table cellspacing="0" cellpadding="0">
  <tr>
    <td align="center"><img onDblClick="placement_fin();" onMouseOver="aller_droite();style.cursor='pointer';"
onMouseOut="STOP();this.style.cursor='';" title="Double-cliquez pour atteindre le début de la liste" src="photos/array_left.gif"
align="center" border="0"> </td>
 
<td align="center" valign="top">
<div id="container" style="OVERFLOW: hidden; WIDTH: 350px; POSITION: relative;"> 
        <div id="content" style="LEFT: 0px; POSITION: relative;"> 
          <table cellspacing="0" cellpadding="0" border="0">
            <tr> 
              <td valign="top"><a href="photos/accueil_ta/chateau.jpg" target="_blank"><img src="photos/accueil_ta/mini/chateau.jpg" alt="" width="124" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/levage_vide.jpg" target="_blank"><img src="photos/accueil_ta/mini/levage_vide.jpg" alt="" width="62" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/ecureuil.jpg" target="_blank"><img src="photos/accueil_ta/mini/ecureuil.jpg" alt="" width="140" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/incendie.jpg" target="_blank"><img src="photos/accueil_ta/mini/incendie.jpg" alt="" width="56" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/prisedevue_2.jpg" target="_blank"><img src="photos/accueil_ta/mini/prisedevue_2.jpg" alt="" width="140" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/laperdrix_levage.jpg" target="_blank"><img src="photos/accueil_ta/mini/laperdrix_levage.jpg" alt="" width="140" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/levage.jpg" target="_blank"><img src="photos/accueil_ta/mini/levage.jpg" alt="" width="62" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/levage_jaude.jpg" target="_blank"><img src="photos/accueil_ta/mini/levage_jaude.jpg" alt="" width="62" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/prisedevue.jpg" target="_blank"><img src="photos/accueil_ta/mini/prisedevue.jpg" alt="" width="124" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/helico_dos.jpg" target="_blank"><img src="photos/accueil_ta/mini/helico_dos.jpg" alt="" width="62" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/levage_2helico.jpg" target="_blank"><img src="photos/accueil_ta/mini/levage_2helico.jpg" alt="" width="62" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/levage_2helico_2.jpg" target="_blank"><img src="photos/accueil_ta/mini/levage_2helico_2.jpg" alt="" width="62" height="93" border="0" align="absMiddle"></a></td>
            </tr>
          </table>
        </div>
      </div>
</td>
<td align="center"><img onDblClick="placement_debut();" onMouseOver="aller_gauche();style.cursor='pointer';"
onMouseOut="STOP();style.cursor='';" title="Double-cliquez pour atteindre la fin de la liste" src="photos/array_right.gif"
align="center" border="0">
</td>
</tr>
</table>

[amika]

voila le script modifié :
code javascript:

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
82
<script>
var num=0 ;
initialisation = new Array(2);
vitesse = new Array(2);
temps = new Array(2);
contenu = new Array(2);
longueur = new Array(2);
cadre = new Array(2);
for (i=0 ; i<=1;i++){  
	initialisation[i] = false;
	vitesse[i] = 10;
	temps[i] = 0;
	contenu[i] = null;
	longueur[i] = 0;
	cadre[i] = 480;
}
 
function gauche(n) { num=n; aller_gauche(); } 
function droite(n) { num=n; aller_droite(); } 
 
function aller_gauche()
{
INIT(num);
 
if( parseInt( contenu[num].style.left ) > (cadre[num] - longueur[num]) )
{
contenu[num].style.left = Math.max(cadre[num] - longueur[num], parseInt( contenu[num].style.left ) - vitesse[num]);
temps[num] = setTimeout(aller_gauche, 40);
}
}
 
function aller_droite()
{
INIT(num);
 
if( parseInt( contenu[num].style.left ) < 0 )
{
contenu[num].style.left = Math.min(0, parseInt( contenu[num].style.left ) + vitesse[num]);
temps[num] = setTimeout(aller_droite, 40);
}
}
 
function placement_fin(n)
{
INIT(n);
STOP(n);
contenu[n].style.left = 0;
}
 
function placement_debut(n)
{
INIT(n);
STOP(n);
contenu[n].style.left = cadre[n] - longueur[n];
}
 
function STOP(n)
{
if( temps[n] )
{
clearTimeout(temps[n]);
temps[n] = 0;
}
}
 
function INIT(n)
{
if( !initialisation[n] )
{
contenu[n] = document.getElementById( "content"+n )
 
var obj = document.getElementById( "container"+n );
if( obj )
{
longueur[n] = obj.scrollWidth;
cadre[n] = obj.clientWidth;
}
 
initialisation[n] = true;
}
}
</script>

code html:

Code HTML :

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
<table cellspacing="0" cellpadding="0">
  <tr>
    <td align="center"><img onDblClick="placement_fin(0);" onMouseOver="droite(0);style.cursor='pointer';"
onMouseOut="STOP(0);this.style.cursor='';" title="Double-cliquez pour atteindre le début de la liste" src="photos/array_left.gif"
align="center" border="0"> </td>
 
<td align="center" valign="top">
<div id="container0" style="OVERFLOW: hidden; WIDTH: 350px; POSITION: relative;"> 
        <div id="content0" style="LEFT: 0px; POSITION: relative;"> 
          <table cellspacing="0" cellpadding="0" border="0">
            <tr> 
              <td valign="top"><a href="photos/accueil_ta/chateau.jpg" target="_blank"><img src="photos/accueil_ta/mini/chateau.jpg" alt="" width="124" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/levage_vide.jpg" target="_blank"><img src="photos/accueil_ta/mini/levage_vide.jpg" alt="" width="62" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/ecureuil.jpg" target="_blank"><img src="photos/accueil_ta/mini/ecureuil.jpg" alt="" width="140" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/incendie.jpg" target="_blank"><img src="photos/accueil_ta/mini/incendie.jpg" alt="" width="56" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/prisedevue_2.jpg" target="_blank"><img src="photos/accueil_ta/mini/prisedevue_2.jpg" alt="" width="140" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/laperdrix_levage.jpg" target="_blank"><img src="photos/accueil_ta/mini/laperdrix_levage.jpg" alt="" width="140" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/levage.jpg" target="_blank"><img src="photos/accueil_ta/mini/levage.jpg" alt="" width="62" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/levage_jaude.jpg" target="_blank"><img src="photos/accueil_ta/mini/levage_jaude.jpg" alt="" width="62" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/prisedevue.jpg" target="_blank"><img src="photos/accueil_ta/mini/prisedevue.jpg" alt="" width="124" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/helico_dos.jpg" target="_blank"><img src="photos/accueil_ta/mini/helico_dos.jpg" alt="" width="62" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/levage_2helico.jpg" target="_blank"><img src="photos/accueil_ta/mini/levage_2helico.jpg" alt="" width="62" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/levage_2helico_2.jpg" target="_blank"><img src="photos/accueil_ta/mini/levage_2helico_2.jpg" alt="" width="62" height="93" border="0" align="absMiddle"></a></td>
            </tr>
          </table>
        </div>
      </div>
</td>
<td align="center"><img onDblClick="placement_debut(0);" onMouseOver="gauche(0);style.cursor='pointer';"
onMouseOut="STOP(0);style.cursor='';" title="Double-cliquez pour atteindre la fin de la liste" src="photos/array_right.gif"
align="center" border="0">
</td>
</tr>
</table>
 
 
<table cellspacing="0" cellpadding="0">
  <tr>
    <td align="center"><img onDblClick="placement_fin(1);" onMouseOver="droite(1);style.cursor='pointer';"
onMouseOut="STOP(1);this.style.cursor='';" title="Double-cliquez pour atteindre le début de la liste" src="photos/array_left.gif"
align="center" border="0"> </td>
 
<td align="center" valign="top">
<div id="container1" style="OVERFLOW: hidden; WIDTH: 350px; POSITION: relative;"> 
        <div id="content1" style="LEFT: 0px; POSITION: relative;"> 
          <table cellspacing="0" cellpadding="0" border="0">
            <tr> 
              <td valign="top"><a href="photos/accueil_ta/chateau.jpg" target="_blank"><img src="photos/accueil_ta/mini/chateau.jpg" alt="" width="124" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/levage_vide.jpg" target="_blank"><img src="photos/accueil_ta/mini/levage_vide.jpg" alt="" width="62" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/ecureuil.jpg" target="_blank"><img src="photos/accueil_ta/mini/ecureuil.jpg" alt="" width="140" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/incendie.jpg" target="_blank"><img src="photos/accueil_ta/mini/incendie.jpg" alt="" width="56" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/prisedevue_2.jpg" target="_blank"><img src="photos/accueil_ta/mini/prisedevue_2.jpg" alt="" width="140" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/laperdrix_levage.jpg" target="_blank"><img src="photos/accueil_ta/mini/laperdrix_levage.jpg" alt="" width="140" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/levage.jpg" target="_blank"><img src="photos/accueil_ta/mini/levage.jpg" alt="" width="62" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/levage_jaude.jpg" target="_blank"><img src="photos/accueil_ta/mini/levage_jaude.jpg" alt="" width="62" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/prisedevue.jpg" target="_blank"><img src="photos/accueil_ta/mini/prisedevue.jpg" alt="" width="124" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/helico_dos.jpg" target="_blank"><img src="photos/accueil_ta/mini/helico_dos.jpg" alt="" width="62" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/levage_2helico.jpg" target="_blank"><img src="photos/accueil_ta/mini/levage_2helico.jpg" alt="" width="62" height="93" border="0" align="absMiddle"></a></td>
              <td valign="top"><a href="photos/accueil_ta/levage_2helico_2.jpg" target="_blank"><img src="photos/accueil_ta/mini/levage_2helico_2.jpg" alt="" width="62" height="93" border="0" align="absMiddle"></a></td>
            </tr>
          </table>
        </div>
      </div>
</td>
<td align="center"><img onDblClick="placement_debut(1);" onMouseOver="gauche(1);style.cursor='pointer';"
onMouseOut="STOP(1);style.cursor='';" title="Double-cliquez pour atteindre la fin de la liste" src="photos/array_right.gif"
align="center" border="0">
</td>
</tr>
</table>

[lau_1611]

Merci je vais tester cela dès ce soir et je reviendrais vous dire si ça a marché.
Merci beaucoup de m'aider vraiment c'est super sympa !

[amika]

en tout cas je l'ai testé et ça fonctionne tres bien.

[lau_1611]

Merci ça marche super, c'est exactement ce que je cherchais à faire.
MERCIIIIIIII

[amika]

tu peux l'ajuster pour plusieurs bandeaux d'images facilement.