Scrollbar horizontale avec images

**Oluha** · 27/04/2007, 15h12

Salut

J'ai un peu honte de poster ça mais j'ai beau chercher sur le forum ou google, je ne trouve rien

Mon client m'emmerde à vouloir faire une scrollbar horizontale farfelue sur son site, mais pas le choix, faut faire. J'ai mis en pièce jointe la chose en question.

Seulement je trouve des codes pour faire 2 boutons "haut/bas" mais pas pour faire une scrollbar horizontale (donc droite/gauche) et qui plus est avec la barre de défilement au milieu.

Quelqu'un aurait un code tout fait pour ce genre de truc complètement inutile ?

Merci

**dam_moreyllo** · 27/04/2007, 22h05

Bonjour !
Désolé j'ai pas de code tout fait à disposition, mais peut être que tu peux utiliser ce code par exemple (c'est le premier que j'ai trouvé, y en a peut être d'autres mieux faits) : http://www.biblioscript.com/dhtml/enc_defil.shtml
A mon avis, il suffit de lancer le défilement (a la fois de la barre de défilement mais aussi du contenu) vers la droite sur onmousedown de ton bouton droit et de l'arrêter sur onmouseup et pareil pour le bouton gauche !
Mais faudra faire un petit calcul pour que le défilement de la barre soit synchronisé avec celui du contenu.
Sinon t'a regardé au niveau des frameworks du style script.aculo.us, dojo, ... ?

Bon courage en tout cas !

**Auteur** · 28/04/2007, 00h42

bonjour,

quelque chose dans ce goût là ?

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
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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<style type="text/css">
<!--
/* style conteneur pour affichage horizontal */
.conteneurH{
 width: 200px;;
 height: 80px;
 overflow: auto;
 border: ridge 2px #AAAAAA;
 padding: 5px;
}
 
/* style images pour affichage horizontal */
.horizontal{
 margin-left: 40px;
 margin-right: 40px;
 margin-top: 0px;
 margin-bottom: 0px;
 height: 50px;
 vertical-align: middle;
}
 
.btOver{
 font-weight: bold;
 cursor: pointer;
}
 
.btOut{
 font-weight: normal;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
//Tableau des images
var mesImages = new Array();
mesImages[0] = "i0.gif";
mesImages[1] = "i1.gif";
mesImages[2] = "i2.gif";
mesImages[3] = "i3.gif";
mesImages[4] = "i4.gif";
mesImages[5] = "i5.gif";
mesImages[6] = "i6.gif";
 
function diaporama()
{
 var i, elmt, c;
 
 c = document.getElementById("idConteneur");
 
     c.className = "conteneurH";
     elmt = document.createElement("nobr"); //ajout de la balise nobr pour éviter un retour à la ligne
     c.appendChild(elmt);
     c = elmt;
 
 
 for (i=0; i<mesImages.length; i++)
 {
   elmt = document.createElement("img");
   elmt.id = "idImage"+this.i;
   elmt.src = mesImages[i];
 
   elmt.className = "horizontal";
 
   c.appendChild(elmt);
 }
 
}
 
/************************************************/
var delai = "20", pas=5;
 
var timer=null;
var sW, cW, sL;
var obj = null;
var sens;
 
function timeScroll()
{
  sL = sL+sens;
  if (sL<=0 || sL+cW>=sW)
  {
    clearInterval(timer);
    timer = null;
  }
  else
    obj.scrollLeft = sL;
}
 
function scroll(bt, ev)
{
  obj = document.getElementById("idConteneur");
  //alert(obj.offsetWidth+" "+obj.scrollWidth+" "+obj.clientWidth+" "+obj.scrollLeft);
  sW = parseInt(obj.scrollWidth);
  cW = parseInt(obj.clientWidth);
  sL = parseInt(obj.scrollLeft);
 
  if (obj!=null && timer==null)
  {
 
    bt.className = "btOver";
 
    if (bt.id=="idGauche")
    {
     if (sL!=0)
     {
       sens = -1*pas;
       timer = setInterval("timeScroll()",delai);
     }
    }
 
    if (bt.id=="idDroite")
    {
     if (sL+cW<sW)
     {
       sens = 1*pas;
       timer = setInterval("timeScroll()",delai);
     }
    }
  }
}
 
function stopScroll(bt)
{
 bt.className = "btOut";
 
 clearInterval(timer);
 timer = null;
 
}
 
//-->
</script>
 
</head>
 
<body onload="diaporama()">
 
<div id="idConteneur"></div>
<div>
<span class="btOut" id="idGauche" onmouseover="scroll(this)" onmouseout="stopScroll(this)">&nbsp;Gauche&nbsp;</span>
<span class="btOut" id="idDroite" onmouseover="scroll(this)" onmouseout="stopScroll(this)">&nbsp;Droite&nbsp;</span>
</div>
 
</body>
 
</html>

survole les termes "gauche" et "droite" pour faire défiler.

Tu as 3 paramètres à déterminer :

la liste des images à faire défiler :
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
```
var mesImages = new Array();
```
la vitesse de défilement (en millisecondes), c'est une chaîne de caractères :
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
```
1
2
 
var delai = "20"
```
le pas du défilement (avancement du scroll en pixels):
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
```
var pas=5;
```

**Oluha** · 30/04/2007, 09h53

@ptitskippy : ton script ne semble pas fonctionner sous Firefox

@auteur : ca me semble interressant, par contre il faudrait que je mette la scrollbar du navigateur en hidden mais du coup je n'ai pas la barre de défilement qu'ils m'ont mis dans la maquette

**Auteur** · 30/04/2007, 20h35

j'ai fait un scroll avec des images....

L'image de la barre fait 1px de large sur 20px de haut (les flèches font également 20px de haut).

donc si tu veux une barre de 160px de large :

Code css :

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