Défilement d'images horizontalement

**Vortexia** · 05/02/2012, 05h13

Bonjour à tous,

J'ai récupérer un code qui ne fonctionne que s'il se trouve dans la balise body, or je veux le faire tourner dans la balise footer.

Quelles modifications dois je apporter au code SVP ?
Merci pour votre aide.

le code est ici :

http://javascript.developpez.com/tel...orizontalement

**NoSmoking** · 05/02/2012, 14h45

Bonjour,
qu'est ce qui t'empêches de mettre une balise qui a pour id mess dans ton FOOTER, tu peux la mettre où tu veux dans le document.

**Vortexia** · 05/02/2012, 21h10

Salut,

J'ai déja tenté cela, en faisant un copier coller du code dans ma balise footer mais çà ne marche pas.

La balise h1 a une id=mess donc ça devrait être bon mais je comprend pas, il doit y avoir un probléme dans le javascript.

**NoSmoking** · 05/02/2012, 22h52

Envoyé par Vortexia

La balise h1 a une id=mess donc ça devrait être bon mais je comprend pas, il doit y avoir un probléme dans le javascript.

non je me suis fourvoyé, les images apparaissent dans la DIV id="nul".

C'est cette DIV que tu dois déplacer.

**Vortexia** · 06/02/2012, 21h38

Bonsoir,

J'ai déja essayer ce que tu dis, j'ai tout deplacé dans ma balise footer, y compris la div de reception avec l'ID=nul.

Le problème est je pense dans le code javascript mais je tatonne encore avec ce langage.
Mon avis est que le problème est dans la fonction de positionnement ou dans la fonction de creation des images.
Ne faut-il pas mettre "document.footer........" au lieu de "document.body........."

Merci de m'aider.

**NoSmoking** · 08/02/2012, 19h08

Ne faut-il pas mettre "document.footer....

la structure de ton document "ressemblant" à ceci, supposition

Code html :

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

1
2
3
4
5
6
7
<body>
<header></header>
<h1 id="mess" style="text-align:center">Veuillez patienter...</h1>
<footer>
<div id="nul"></div>
</footer>
</body>

ton script doit être inséré avant la balise de fin de BODY MAIS APRES la déclaration de la DIV qui à pour id=null

Code html :

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

1
2
3
4
5
6
7
8
<body>
<header></header>
<h1 id="mess" style="text-align:center">Veuillez patienter...</h1>
<footer>
<div id="nul"></div>
</footer>
<script type="text/javascript" src="javatwister_animation.js"></script>
</body>

le fichier javatwister_animation.js contenant le code du défilement.

**Vortexia** · 11/02/2012, 04h22

J'ai essayé comme tu as dis encore une fois mais ça ne fonctionne pas

Merci en tout cas pour ton aide, ça doit pas etre sorcier pourtant

.

Invité · 11/02/2012, 13h15

Bonjour, ca fonctionnera de cette manière :

Code css :

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

1
2
3
4
5
6
7
 
body { margin:0px }
img { display:none; position:absolute; }
// propriétés de la boite à images;"position" et "overflow" sont nécessaires;
#c { display:none; margin-top:100px; background-color:#ffcc00; position:relative; overflow:hidden; }
 
header, content, footer { clear:both; position:relative; overflow:hidden; }

Code html :

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

1
2
3
4
5
6
<footer id="footer">
<h1 id="mess" style="text-align:center">
Veuillez patienter...
</h1>
<div id="nul"></div>
</footer>

Et dans le script, il faut remplacer (2 occurences) :
document.body.[...]
par :
document.getElementById('footer').[...]

**Vortexia** · 11/02/2012, 17h19

voici mon code:

Code :

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

1
2
3
4
5
6
 
body { margin:0px }
img { display:none; position:absolute; }
// propriétés de la boite à images;"position" et "overflow" sont nécessaires;
#c { display:none; margin-top:100px; background-color:#ffcc00; position:relative; overflow:hidden; }
header, content, footer { clear:both; position:relative; overflow:hidden; }

et le html:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<body>
<footer>
<h1 id="mess" style="text-align:center">
Veuillez patienter...
</h1>			
<div id="nul"></div>
</footer>
 
</body>

Et entre la fin du footer et fin de body j'ai mis le script:

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
 
//||||||||||||||||||||
//Création des images|
//||||||||||||||||||||
for(i=0;i!=60;i++){
   zero= i<9 ? 0 : "";
   tab[i]=new Image();
   tab[i].src="http://javatwist.imingo.net/sm"+zero+(i+1)+".gif";
   c.appendChild(tab[i]);
}
document.body.replaceChild (c,document.getElementById('footer').('nul'));
//|||||||||||||||||||||||||||||||||||||||||||||||||
//Positionnement des images et lancement du script|
//|||||||||||||||||||||||||||||||||||||||||||||||||
onload=function(){
document.body.removeChild(c,document.getElementById('footer').("mess"));
c.style.display="block";
for(i in tab){
tab[i].style.left=pos+"px";
tab[i].style.top=(H-tab[i].height)/2+"px";
tab[i].style.display="inline";
pos+=tab[i].width;
}
go();
}

Ce code ne fonctionne toujours pas, j'ai peut etre fais une erreur, dites moi.
As tu testé le code Jreaux ?

si quelqu'un peux poster le code fonctionnel, ça serais cool.

**NoSmoking** · 11/02/2012, 17h38

Ce code ne fonctionne toujours pas, j'ai peut etre fais une erreur, dites moi.

oui , l'erreur est de modifier le code qui marche très bien, document.getElementById('footer').("mess") ne veut rien dire.

Tu as visiblement un problème d'intégration de celui ci dans ta page, voir le canevas ci dessous.

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
<title>[...]</title>
<style type="text/css">
body{
  margin:0px
}
img{
  display:none;
  position:absolute;
}
/* propriétés de la boite à images;"position" et "overflow" sont nécessaires; */
#c {
  display:none;
  margin-top:100px;
  background-color:#ffcc00;
  position:relative;
  overflow:hidden;
 }
header, content, footer {
  clear:both;
  position:relative;
  overflow:hidden;
}
</style>
</head>
<body>
  <footer>
    <h1 id="mess" style="text-align:center">Veuillez patienter...</h1>
    <div id="nul"></div>
  </footer>
<script type="text/javascript">
// ICI METTRE L'INTEGRALITE DU SCRIPT
<script>
</body>
</html>

Invité · 11/02/2012, 17h50

Il faut mettre un id au footer pour que ca marche :

Code :

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

<footer id="footer">

Ce qui explique le :

Code :

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

document.getElementById('footer').[...]

@NoSmoking : j'avais testé avec document.getElementByTagName('footer'), sans mettre d'id, mais ca ne fonctionnait pas...

**Vortexia** · 12/02/2012, 04h33

Merci encore pour vos reponses et désolé pour mon petit niveau.

Voici mon code complet et revue selon Jreaux:

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
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
158
159
160
161
162
 
<!DOCTYPE HTML>
<html lang="fr">
<head>
<title>[...]</title>
<style type="text/css">
body{
  margin:0px
}
img{
  display:none;
  position:absolute;
}
/* propriétés de la boite à images;"position" et "overflow" sont nécessaires; */
#c {
  display:none;
  margin-top:100px;
  background-color:#ffcc00;
  position:relative;
  overflow:hidden;
 }
header, content, footer {
  clear:both;
  position:relative;
  overflow:hidden;
}
</style>
</head>
<body>
 
<footer id="footer">
   <h1 id="mess" style="text-align:center">Veuillez patienter...</h1>
    <div id="nul"></div> 
</footer>
<script type="text/javascript">
//||||||||||
//Variables|
//||||||||||
var timer,zero,w,lf,el;
var tab=new Array();
var pos=0;
var val=0;
var oui=true;
 
 
//||||||||||||||||||||||||
//Variables paramétrables|
//||||||||||||||||||||||||
var M=100;// marge de gauche de la boîte à images;
 
var W=300;// largeur de la boîte à images
// (forcément supérieure à la somme des largeurs des images);
 
var H=100;// hauteur de la boîte à images;
 
var delai=Math.round(W/4);
// le délai initial est d'un quart
// de la largeur de la boîte;
 
 
//|||||||||||||||||||||
//Création de la boîte|
//|||||||||||||||||||||
var c=document.createElement('div');
c.id="c";
c.style.marginLeft=M+"px";
c.style.width=W+"px";
c.style.height=H+"px";
 
var dec=M+W/2;// position horizontale au centre de la boîte;
 
 
//||||||||||||||||||||
//Création des images|
//||||||||||||||||||||
for(i=0;i!=60;i++){
   zero= i<9 ? 0 : "";
   tab[i]=new Image();
   tab[i].src="http://javatwist.imingo.net/sm"+zero+(i+1)+".gif";
   c.appendChild(tab[i]);
}
document.body.replaceChild(c,document.getElementById('footer').('nul'));
 
 
//|||||||||||||||||||||||
//Déplacement des images|
//|||||||||||||||||||||||
function go(){
for(i in tab){
   lf=parseInt(tab[i].style.left);
   w=tab[i].width;
   tab[i].style.left=lf+val+"px";
   if(lf>pos-w){
      tab[i].style.left=lf-pos+"px"};
   if(lf<W-pos){
      tab[i].style.left=lf+pos+"px"};
}
timer=setTimeout("go()",delai)
}
 
 
//||||||||||||||||
//Vitesse et sens|
//||||||||||||||||
function speed(e){
el= (!e) ? event.clientX : e.pageX;
 
if(el>=dec){
   delai=W/2+2-(el-dec);val=2}// val=déplacement
else{
   delai=W/2-1-(dec-el);val=-2};// val=déplacement
}
 
 
//||||||||||||||||||||||||
//Gestionnaire de "speed"|
//||||||||||||||||||||||||
c.onmousemove=speed;
 
 
//|||||||||||||||||||||||||||||||||||||||||||||||||
//Pause / relance du script / activation des liens|
//|||||||||||||||||||||||||||||||||||||||||||||||||
c.onclick=function(){
   if(oui){clearTimeout(timer);oui=false;
      for(i in tab){
         tab[i].style.cursor="pointer"};
   }
   else{go();oui=true;
      for(i in tab){
         tab[i].style.cursor="default"};
   };
}
 
 
//||||||||||||||||||||
//Lancement des liens|
//||||||||||||||||||||
for(i in tab){
   tab[i].onclick=function(){
      if(this.style.cursor=="pointer"){
         window.open(this.src)}
      };
}
 
//|||||||||||||||||||||||||||||||||||||||||||||||||
//Positionnement des images et lancement du script|
//|||||||||||||||||||||||||||||||||||||||||||||||||
onload=function(){
document.body.removeChild(document.getElementById("footer").("mess"));
c.style.display="block";
for(i in tab){
tab[i].style.left=pos+"px";
tab[i].style.top=(H-tab[i].height)/2+"px";
tab[i].style.display="inline";
pos+=tab[i].width;
}
go();
}
</script>
</body>
</html>

J'ai mis un id à mon footer mais j'étais pas sûr de l'intégration au niveau des 2 occurences à modifier.

mon code ne fonctionne pas.
où est l'erreur ? merci encore.

**NoSmoking** · 12/02/2012, 08h27

Envoyé par NoSmoking

oui , l'erreur est de modifier le code qui marche très bien, document.getElementById('footer').("mess") ne veut rien dire.

je persiste et signe...

La méthode getElementById de l'objet document retourne l'élément qui possède l'ID passé en paramètre et.... c'est tout, comme l'indique son nom d'ailleurs.

document.getElementById('footer') retourne l'élément possédant l'ID 'footer', et ajouter un .('mess') ne représente plus rien et génère une ERREUR.

Pour atteindre l'élément possédant comme ID 'mess', il suffit de faire simplement document.getElementById('mess').

Pourquoi ne pas remettre entre les balises <script type="text/javascript"></script> le code ORIGINAL?

Merci encore pour vos reponses et désolé pour mon petit niveau.

ce n'est qu'un état passager, qui ne sera que du passé après lecture de Introduction au JavaScript

Invité · 12/02/2012, 09h40

Bon. Manifestement, je me suis mal fait comprendre (?!)

Voici les modifications à faire dans le 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
// Création des images
for(i=0;i!=6;i++){
zero= (i<9)? 0 : "";
tab[i]=new Image();
tab[i].src="dossier-images/photo-"+zero+(i+1)+".jpg";
c.appendChild(tab[i]);
}
//	document.body.replaceChild(c,document.getElementById('nul')); 
// A REMPLACER PAR :
	document.getElementById('footer').replaceChild(c,document.getElementById('nul'));

// [...]

//Positionnement des images et lancement du script
onload=function(){
//	document.body.removeChild(document.getElementById("mess")); 
// A REMPLACER PAR :
	document.getElementById('footer').removeChild(document.getElementById("mess"));
	c.style.display="block";

Invité · 12/02/2012, 09h53

Voici la page complète :

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
<title>Faire défiler des images horizontalement</title>
 
<style type="text/css">
body{
  margin:0px
}
img{
  display:none;
  position:absolute;
}
/* propriétés de la boite à images;"position" et "overflow" sont nécessaires; */
#c {
  display:none;
  margin-top:100px;
  background-color:#ffcc00;
  position:relative;
  overflow:hidden;
 }
header, content, footer {
  clear:both;
  position:relative;
  overflow:hidden;
}
</style>
 
</head>
<body>
 
<header>
   <h1>Faire défiler des images horizontalement</h1>
</header>
 
<content>
<strong>
En passant sur la boite à images, on décide du sens et de la vitesse de défilement;<br />
En cliquant sur la zone, on stoppe le défilement et on active les liens images;</strong>
<br/>
On peut alors afficher chaque image dans une fenêtre indépendante (pas d'agrandissement ici, ce n'est pas le but);<br />
Si on re-clique dans la zone, on relance le défilement;
</content>
 
<footer id="footer">
	<h6 id="mess" style="text-align:center">Veuillez patienter...</h6>
	<div id="nul"></div> 
	<script type="text/javascript" src="./defilement-images-script.js"></script>
</footer>
 
</body>
</html>

Il semble que ce script ne fonctionne que s'il est placé APRES <div id="nul"></div> (et donc PAS dans <head>)

ICI, j'ai mis le script dans un fichier externe defilement-images-script.js :

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
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
/* Faire defiler des images horizontalement */
// Variables
var timer,zero,w,lf,el;
var tab=new Array();
var pos=0;
var val=0;
var oui=true;
 
// Variables paramétrables
var M=100;// marge de gauche de la boite à images;
var W=500;// largeur de la boite à images
// (forcément supérieure à la somme des largeurs des images);
var H=100;// hauteur de la boite à images;
var delai=Math.round(W/4);// le délai initial est d'un quart
// de la largeur de la boite;
 
//Création de la boite
var c=document.createElement('div');
c.id="c";
c.style.marginLeft=M+"px";
c.style.width=W+"px";
c.style.height=H+"px";
var dec=M+W/2;// position horizontale au centre de la boite;
 
// Création des images
for(i=0;i!=60;i++){
   zero= i<9 ? 0 : "";
   tab[i]=new Image();
   // chemin et noms des IMAGES
   tab[i].src="http://javatwist.imingo.net/sm"+zero+(i+1)+".gif";
   c.appendChild(tab[i]);
}
//	document.body.replaceChild(c,document.getElementById('nul')); 
// A REMPLACER PAR :
	document.getElementById('footer').replaceChild(c,document.getElementById('nul'));
 
// Déplacement des images
function go(){
for(i in tab){
lf=parseInt(tab[i].style.left);
w=tab[i].width;
tab[i].style.left=lf+val+"px";
if(lf>pos-w){
tab[i].style.left=lf-pos+"px"};
if(lf<W-pos){
tab[i].style.left=lf+pos+"px"};
}
timer=setTimeout("go()",delai)
}
//Vitesse et sens
function speed(e){
el= (!e)? event.clientX : e.pageX;
if(el>=dec){
delai=W/2+2-(el-dec);val=2}// val=déplacement
else{
delai=W/2-1-(dec-el);val=-2};// val=déplacement
}
 
// Gestionnaire de "speed"
c.onmousemove = speed;
 
// Pause / relance du script / activation des liens
c.onclick=function(){
	if(oui){
		clearTimeout(timer); 
		oui=false;
		for(i in tab){
			tab[i].style.cursor="pointer";
		}
	} else {
		go();
		oui=true;
		for(i in tab){
			tab[i].style.cursor="default";
		}
	}
}
// Lancement des liens
for(i in tab){
	tab[i].onclick=function(){
		if(this.style.cursor=="pointer"){
		window.open(this.src)}
	};
}
 
// Positionnement des images et lancement du script
onload=function(){
//	document.body.removeChild(document.getElementById("mess")); 
// A REMPLACER PAR :
	document.getElementById('footer').removeChild(document.getElementById("mess"));
	c.style.display="block";
	for(i in tab){
		tab[i].style.left=pos+"px";
		tab[i].style.top=(H-tab[i].height)/2+"px";
		tab[i].style.display="inline";
		pos+=tab[i].width;
	}
	go();
}

Sinon, on trouve aussi des scripts très intéressants,
en faisant une recherche sur : "caroussel jquery"

**Vortexia** · 13/02/2012, 02h29

J'ai essayé le code dans mon footer, c'est bon ça marche

Merci Jreaux pour ton soutien et ton support, je suis nouveau ici mais j'apprécie dejà l'accueuil, je me sens en famille

.

ce n'est qu'un état passager, qui ne sera que du passé après lecture de Introduction au JavaScript

Je m'y mets dès aujourd'hui Nosmoking, je compte aussi sur la communauté pour relever mon niveau, merci encore aussi pour tes explications.

**NoSmoking** · 13/02/2012, 22h09

Envoyé par Vortexia

J'ai essayé le code dans mon footer, c'est bon ça marche

...il n'était qu'à suivre les indications données ici

Envoyé par jreaux62

Il semble que ce script ne fonctionne que s'il est placé APRES <div id="nul"></div> (et donc PAS dans <head>)

...avant de 'getter' et d'utiliser un élément il faut qu'il ait été crée dans le DOM.

Concernant la méthode removeChild il est une façon qui permet de ne pas identifier le parent

Code :

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

1
2
var oChild = document.getElementById('mess');
oChild.parentNode.removeChild( oChild);

...le même raisonnement peut être appliqué pour la méthode replaceChild

**Vortexia** · 14/02/2012, 05h29

Effectivement Nosmoking, tu avais apporté une partie de la solution dans le post auquel tu me fais reference, mais le code original ne fonctionnais pas si l'on identifié pas le footer.

Tu ne m'avais pas parlais de la possibilité de remplacer l'instruction removechild et replacechild, Jreaux y a quand même pensé à l'ID même si le code pouvais être optimsé.

Peu importe, Merci encore en tout cas à tout les deux et à cette dernière explication sur l'optimisation.

Défilement d'images horizontalement

JavaScript

Discussions similaires

Partager

Partager