centrer une bande d'images qui défilent

[anninina]

Bonjour

Je travail sur une animation d'une bande des images qui defille horizontalement , j'en ai pas beaucoup de connaissance en javascript du coup j'ai trouvé des difficultés , SVP si quelqu'un à une idé comment centrer cette bande en mettrant la largeur d'affichage à 900 .

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
 
var L_T =900 ; //--// La largeur totale du table des donnés
var D_H = 100 ; //--// La Hauteur du div Afficheur
var D_V = 800; //--// La largeur du div Afficheur, Attention si vous changez cette valeur vous devez modifier (M_G) et (M_D) ci-dessous
//--// Autrement dit ici nous avons 125 + 175 = 300, Ce qui nous donne la largeur totale du div Afficheur et une marge de pause : 175 – 125 = 50 
var M_G = 125 ; //--// La marge gauche pour l’inversion à droite
var M_D =125 ; //--// La marge droite pour l’inversion à gauche
var Z_Z =- (L_T-D_V); //--// c'est la limite droite
document.write('<style type="text/css">#ho_riz{border: 0px solid #CCCCCC; '+
'background-color:#c0c0c0 ; width:'+D_V+'; height:'+D_H+'; overflow:hidden; z-index: 10}'+
'.td-vh1{BORDER-RIGHT: #c0c0c0 0px dashed; BORDER-TOP: #c0c0c0 0px dashed; BORDER-LEFT: #c0c0c0 0px dashed; BORDER-BOTTOM: #c0c0c0 0px;}'+
'.tab_vh1{font-size: 9pt; font-family: Arial; align:absolute; }</style>');
var timer;
function dr_oite() { //--// aller on va à droite
/* Pour pouvoir utiliser ce code à titre personnel ne pas supprimer les lignes du commentaire ci-dessous.
(c) : abdelaziz rejeb Elalia 7016 Tunisie 
site : http://abdelaziz.site.voila.fr 
pour tout contact: http://intersite.site.voila.fr
Le 27/03/2009
*/
S_V=1
document.getElementById("menus").style.marginLeft =Z_Z++
timer=setTimeout('dr_oite();',1);
if(Z_Z==0){clearInterval(timer);gau_che()}
}
function gau_che() { //--// et on va à gauche
S_V=2
document.getElementById("menus").style.marginLeft =Z_Z--
timer=setTimeout('gau_che();',1);
if(Z_Z==(-(L_T-D_V)+1)){clearInterval(timer),dr_oite()}
}
function sur_vol() { // réaction à la sortie du curseur
   if(S_V==2)
   {
    clearInterval(timer),gau_che();
   }
   else
   {
    clearInterval(timer),dr_oite();
   }
}
//--// Les commandes de droite à gauche
var f=0; 
function in_verseur(){
mouse_x = 0;
mouse_y = 0;
document.getElementById("ho_riz").onmousemove = position;
}
function position(evt){
if(!evt) evt = window.event;
mouse_x = evt.clientX;
mouse_y = evt.clientY;
   if(mouse_x<(f+M_G)){clearInterval(timer),dr_oite()} //--// vers la droite
   if(mouse_x>(f+M_D)){clearInterval(timer),gau_che()} //--// vers la gauche
   if(mouse_x>(f+M_G) && mouse_x<(f+M_D)){clearInterval(timer)} //--// position de pause
}
function B_TN(NUM){ //--// commandes de la barre  de défilement
    if (NUM==4){document.getElementById('ho_riz').style.overflow='auto'};
    if (NUM==5){document.getElementById('ho_riz').style.overflow='hidden'};
}
//--// position horizontale du div sur la page
function po_sit(ho_riz)
{
xhorzp =100; 
while (ho_riz.tagName != 'BODY')
{
xhorzp += ho_riz.offsetLeft;
ho_riz = ho_riz.offsetParent;
}
f=xhorzp //--// Valeur f = (le Trajet d’inversion de sens)
}

[SpaceFrog]

souci css plutot ...
regarde du coté de margin auto vu que tu as une largeur fixe de conteneur ...

[anninina]

Merci pour ta réponse , mais la j'ai changé un peu le code : mais j'ai un autre souci cette fois je souhaite ajouter une ligne d'instruction à un href dans une fonction , j'ai mis une concaténation de se sorte :

Code :

href='images/'+tblien[xx]+'.png'.onclick='return hs.expand(this)'

mais la tous est bloqué
je vous donne tous le code pour bien comprendre ce que je veux faire

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
 
 
<!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">
 
<script type="text/javascript" src="js/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="js/highslide.css" />
<body>
 
<script type="text/javascript">
hs.graphicsDir = 'graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.dimmingOpacity = 0.8;
hs.outlineType = 'rounded-white';
hs.captionEval = 'this.thumb.alt';
hs.marginBottom = 105; // make room for the thumbstrip and the controls
hs.numberPosition = 'caption';
 
// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
	//slideshowGroup: 'group1',
	interval: 5000,
	repeat: false,
	useControls: true,
	overlayOptions: {
		className: 'text-controls',
		position: 'bottom center',
		relativeTo: 'viewport',
		offsetY: -60
	},
	thumbstrip: {
		position: 'bottom center',
		mode: 'horizontal',
		relativeTo: 'viewport'
	}
});
</script>
 
 
 
<script language="JavaScript">
var hauteur_tab=100   //hauteur du tableau
var temp=600          //temp pour le defilement
var nbr_de_cellule=6  // nombre de cellules (images) visibles
 
var xx=nbr_de_cellule
var suivi=0
// tableau qui stock le nom des images
tbimage=new Array("Couv_TUNIQUES_38_p","5","Couv_TUNIQUES_38_p","5","Couv_TUNIQUES_38_p","5","5","Couv_TUNIQUES_38_p","5","5","5","5","5","Couv_TUNIQUES_38_p","5","Couv_TUNIQUES_38_p","5","Couv_TUNIQUES_38_p","5","Couv_TUNIQUES_38_p","5","Couv_TUNIQUES_38_p","5","Couv_TUNIQUES_38_p","5","Couv_TUNIQUES_38_p","Couv_TUNIQUES_38_p","Couv_TUNIQUES_38_p","Couv_TUNIQUES_38_p","Couv_TUNIQUES_38_p","Couv_TUNIQUES_38_p","Couv_TUNIQUES_38_p","Couv_TUNIQUES_38_p","Couv_TUNIQUES_38_p","Couv_TUNIQUES_38_p","Couv_TUNIQUES_38_p","Couv_TUNIQUES_38_p","Couv_TUNIQUES_38_p","Couv_TUNIQUES_38_p","Couv_TUNIQUES_38_p","Couv_TUNIQUES_38_p","Couv_TUNIQUES_38_p","Couv_TUNIQUES_38_p","Couv_TUNIQUES_38_p","Couv_TUNIQUES_38_p","Couv_TUNIQUES_38_p","Couv_TUNIQUES_38_p","Couv_TUNIQUES_38_p","Couv_TUNIQUES_38_p")
// tableau qui stock les liens qui peut etre une url
tblien=new Array("d7","d7_02","d7_03","d7_04","d7_05","d7_06","d8","d8_02","d8_03","d8_04","d8_05","d8_06","d10","d10_02","d10_03","d10_04","d10_05","d10_06","d1","d1_02","d1_03","d1_04","d1_05","d1_06","d2","d2_02","d2_03","d2_04","d2_05","d2_06","d3","d4","d4_02","d4_03","d4_04","d4_05","d4_06","d5","d5_02","d5_03","d5_04","d5_05","d5_06","d6","d6_02","d6_03","d6_04","d6_05","d6_06")
function function1() {
if(xx>=tbimage.length-1){
xx=xx-tbimage.length
}
xx++
document.getElementById("ntab").rows[0].insertCell(nbr_de_cellule)
document.getElementById("ntab").rows[0].cells[nbr_de_cellule].appendChild(document.createElement('a')).href='images/'+tblien[xx]+'.png'.onclick='return hs.expand(this)'; //class='highslide' href='images/Montage-19.jpg' onclick="return hs.expand(this)"a modifier si on veut mettre un lien url exemple a mettre apres le egale:  (  tblien[xx] )
document.getElementById("ntab").rows[0].cells[nbr_de_cellule].lastChild.appendChild(document.createElement('img'));
document.getElementById("ntab").rows[0].cells[nbr_de_cellule].lastChild.lastChild.style.height=hauteur_tab+"px"
document.getElementById("ntab").rows[0].cells[nbr_de_cellule].lastChild.lastChild.src='images/'+tbimage[xx]+'.png' //nom et endroit ou se trouve l'image
document.getElementById("ntab").rows[0].deleteCell(0)
}
function function2() {
if(xx<=0){
xx=tbimage.length+(xx)
}
xx--
document.getElementById("ntab").rows[0].insertCell(0)
document.getElementById("ntab").rows[0].cells[0].appendChild(document.createElement('a')).href='images/'+tblien[xx]+'.png'.onclick='return hs.expand(this)';  //a modifier si on veut mettre un lien url exemple a mettre apres le egale:  (  tblien[xx] )
document.getElementById("ntab").rows[0].cells[0].lastChild.appendChild(document.createElement('img'));
document.getElementById("ntab").rows[0].cells[0].lastChild.lastChild.style.height=hauteur_tab+"px"
document.getElementById("ntab").rows[0].cells[0].lastChild.lastChild.src='images/'+tbimage[xx]+'.png' //nom et endroit ou se trouve l'image
document.getElementById("ntab").rows[0].deleteCell(nbr_de_cellule)
}
function aller() {
if(suivi==0){
suivi=1
bozo=setInterval('function1()',temp)
}
else{
clearInterval(bozo)
suivi=0
}
}
 
function retour() {
if(suivi==0){
xx=xx-(nbr_de_cellule-1)
suivi=1
bozo=setInterval('function2()',temp)
}
else{
clearInterval(bozo)
xx=xx+(nbr_de_cellule-1)
suivi=0
}
}
</script>
<div class="highslide-gallery" style="width: 1000px; margin: auto">
<div align='center'>
  <img src='retour2.jpg' onmouseover='aller();this.src="retour.jpg"' onmouseout='aller();this.src="retour2.jpg"' />
  <table id="ntab" border='no'  rules='none'>
   <tr  id='fg'>
 
<!--attention si le tableau doit contenir six cellules mettre six liens -->
 
<td> <a class='highslide' href='images/Montage-19.jpg' onclick="return hs.expand(this)"> <img src='images/5.png' width="130" height=100 border="0"></a> </td>
<td> <a class='highslide' href='images/Montage-19.jpg' onclick="return hs.expand(this)"> <img src='images/5.png' width="130" height=100 border="0"> </a> </td>
<td> <a class='highslide' href='images/Montage-19.jpg' onclick="return hs.expand(this)"> <img src='images/5.png' width="130" height=100 border="0"> </a> </td>
<td> <a class='highslide' href='images/Montage-19.jpg' onclick="return hs.expand(this)"> <img src='images/5.png' width="130" height=100 border="0"> </a> </td>
<td> <a class='highslide' href='images/Montage-19.jpg' onclick="return hs.expand(this)"> <img src='images/5.png' width="130" height=100 border="0"> </a> </td>
<td> <a class='highslide' href='images/Montage-19.jpg' onclick="return hs.expand(this)"> <img src='images/5.png' width="130" height=100 border="0"> </a> </td>
</tr>
</table>
<div align='center'><img src='aller2.jpg' onmouseover='retour();this.src="aller.jpg"' onmouseout='retour();this.src="aller2.jpg"'></div>
</div>
</div>
</body>
</html>

merci d'avance pour votre aide