Précédent   Forum des professionnels en informatique > Webmasters - Développement Web > JavaScript
JavaScript Forum programmation JavaScript. Lire : Cours JavaScript, FAQ JavaScript, Toutes les FAQ JavaScript et Sources JavaScript
Partagez cette discussion sur d'autres réseaux sociaux : Viadeo Twitter Google Facebook Digg Delicious MySpace Yahoo
Réponse Proposer ce sujet en actualité
 
Outils de la discussion
Publicité
'
Vieux 05/02/2012, 05h13   #1
Invité de passage
 
Homme
ingenieur
Inscription : janvier 2012
Messages : 17
Détails du profil
Informations personnelles :
Sexe : Homme

Informations professionnelles :
Activité : ingenieur
Secteur : High Tech - Multimédia et Internet

Informations forums :
Inscription : janvier 2012
Messages : 17
Points : 2
Points : 2
Par défaut Défilement d'images horizontalement

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
Vortexia est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 05/02/2012, 14h45   #2
Modérateur
 
Avatar de NoSmoking
 
Homme
Inscription : janvier 2011
Messages : 2 944
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : France, Isère (Rhône Alpes)

Informations forums :
Inscription : janvier 2011
Messages : 2 944
Points : 4 776
Points : 4 776
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.
NoSmoking est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 05/02/2012, 21h10   #3
Invité de passage
 
Homme
ingenieur
Inscription : janvier 2012
Messages : 17
Détails du profil
Informations personnelles :
Sexe : Homme

Informations professionnelles :
Activité : ingenieur
Secteur : High Tech - Multimédia et Internet

Informations forums :
Inscription : janvier 2012
Messages : 17
Points : 2
Points : 2
Par défaut javascript dans mon footer

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.
Vortexia est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 05/02/2012, 22h52   #4
Modérateur
 
Avatar de NoSmoking
 
Homme
Inscription : janvier 2011
Messages : 2 944
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : France, Isère (Rhône Alpes)

Informations forums :
Inscription : janvier 2011
Messages : 2 944
Points : 4 776
Points : 4 776
Citation:
Envoyé par Vortexia Voir le message
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.
NoSmoking est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 06/02/2012, 21h38   #5
Invité de passage
 
Homme
ingenieur
Inscription : janvier 2012
Messages : 17
Détails du profil
Informations personnelles :
Sexe : Homme

Informations professionnelles :
Activité : ingenieur
Secteur : High Tech - Multimédia et Internet

Informations forums :
Inscription : janvier 2012
Messages : 17
Points : 2
Points : 2
Par défaut defilement images

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.
Vortexia est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 08/02/2012, 19h08   #6
Modérateur
 
Avatar de NoSmoking
 
Homme
Inscription : janvier 2011
Messages : 2 944
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : France, Isère (Rhône Alpes)

Informations forums :
Inscription : janvier 2011
Messages : 2 944
Points : 4 776
Points : 4 776
Citation:
Ne faut-il pas mettre "document.footer....


la structure de ton document "ressemblant" à ceci, supposition
Code html :
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 :
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.
NoSmoking est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 11/02/2012, 04h22   #7
Invité de passage
 
Homme
ingenieur
Inscription : janvier 2012
Messages : 17
Détails du profil
Informations personnelles :
Sexe : Homme

Informations professionnelles :
Activité : ingenieur
Secteur : High Tech - Multimédia et Internet

Informations forums :
Inscription : janvier 2012
Messages : 17
Points : 2
Points : 2
Par défaut defilement horizontal

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.
Vortexia est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 11/02/2012, 13h15   #8
Rédacteur
 
Avatar de jreaux62
 
Homme Jérôme Réaux
Webdesigner
Inscription : août 2008
Messages : 2 994
Détails du profil
Informations personnelles :
Nom : Homme Jérôme Réaux
Âge : 45
Localisation : France, Pas de Calais (Nord Pas de Calais)

Informations professionnelles :
Activité : Webdesigner
Secteur : Arts - Culture

Informations forums :
Inscription : août 2008
Messages : 2 994
Points : 5 787
Points : 5 787
Envoyer un message via Skype™ à jreaux62
Bonjour, ca fonctionnera de cette manière :
Code css :
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 :
1
2
3
4
5
6
<footer id="footer">
<h1 id="mess" style="text-align:center">
Veuillez patienter...
</h1>
<div id="nul"></div>
</footer>
Citation:
Et dans le script, il faut remplacer (2 occurences) :
document.body.[...]
par :
document.getElementById('footer').[...]
__________________
"Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément."
Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique.
Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
jreaux62 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 11/02/2012, 17h19   #9
Invité de passage
 
Homme
ingenieur
Inscription : janvier 2012
Messages : 17
Détails du profil
Informations personnelles :
Sexe : Homme

Informations professionnelles :
Activité : ingenieur
Secteur : High Tech - Multimédia et Internet

Informations forums :
Inscription : janvier 2012
Messages : 17
Points : 2
Points : 2
voici mon code:

Code :
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 :
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 :
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.
Vortexia est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 11/02/2012, 17h38   #10
Modérateur
 
Avatar de NoSmoking
 
Homme
Inscription : janvier 2011
Messages : 2 944
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : France, Isère (Rhône Alpes)

Informations forums :
Inscription : janvier 2011
Messages : 2 944
Points : 4 776
Points : 4 776
Citation:
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 :
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>
NoSmoking est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 11/02/2012, 17h50   #11
Rédacteur
 
Avatar de jreaux62
 
Homme Jérôme Réaux
Webdesigner
Inscription : août 2008
Messages : 2 994
Détails du profil
Informations personnelles :
Nom : Homme Jérôme Réaux
Âge : 45
Localisation : France, Pas de Calais (Nord Pas de Calais)

Informations professionnelles :
Activité : Webdesigner
Secteur : Arts - Culture

Informations forums :
Inscription : août 2008
Messages : 2 994
Points : 5 787
Points : 5 787
Envoyer un message via Skype™ à jreaux62
Il faut mettre un id au footer pour que ca marche :
Ce qui explique le :
Code :
document.getElementById('footer').[...]
@NoSmoking : j'avais testé avec document.getElementByTagName('footer'), sans mettre d'id, mais ca ne fonctionnait pas...
__________________
"Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément."
Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique.
Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
jreaux62 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 12/02/2012, 04h33   #12
Invité de passage
 
Homme
ingenieur
Inscription : janvier 2012
Messages : 17
Détails du profil
Informations personnelles :
Sexe : Homme

Informations professionnelles :
Activité : ingenieur
Secteur : High Tech - Multimédia et Internet

Informations forums :
Inscription : janvier 2012
Messages : 17
Points : 2
Points : 2
Merci encore pour vos reponses et désolé pour mon petit niveau.

Voici mon code complet et revue selon Jreaux:

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
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.
Vortexia est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 12/02/2012, 08h27   #13
Modérateur
 
Avatar de NoSmoking
 
Homme
Inscription : janvier 2011
Messages : 2 944
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : France, Isère (Rhône Alpes)

Informations forums :
Inscription : janvier 2011
Messages : 2 944
Points : 4 776
Points : 4 776
Citation:
Envoyé par NoSmoking Voir le message
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?


Citation:
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
NoSmoking est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 12/02/2012, 09h40   #14
Rédacteur
 
Avatar de jreaux62
 
Homme Jérôme Réaux
Webdesigner
Inscription : août 2008
Messages : 2 994
Détails du profil
Informations personnelles :
Nom : Homme Jérôme Réaux
Âge : 45
Localisation : France, Pas de Calais (Nord Pas de Calais)

Informations professionnelles :
Activité : Webdesigner
Secteur : Arts - Culture

Informations forums :
Inscription : août 2008
Messages : 2 994
Points : 5 787
Points : 5 787
Envoyer un message via Skype™ à jreaux62
Bon. Manifestement, je me suis mal fait comprendre (?!)

Voici les modifications à faire dans le code javascript :
Code :
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";
__________________
"Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément."
Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique.
Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
jreaux62 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 12/02/2012, 09h53   #15
Rédacteur
 
Avatar de jreaux62
 
Homme Jérôme Réaux
Webdesigner
Inscription : août 2008
Messages : 2 994
Détails du profil
Informations personnelles :
Nom : Homme Jérôme Réaux
Âge : 45
Localisation : France, Pas de Calais (Nord Pas de Calais)

Informations professionnelles :
Activité : Webdesigner
Secteur : Arts - Culture

Informations forums :
Inscription : août 2008
Messages : 2 994
Points : 5 787
Points : 5 787
Envoyer un message via Skype™ à jreaux62
Voici la page complète :
Code html :
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 :
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"
__________________
"Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément."
Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique.
Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
jreaux62 est déconnecté   Envoyer un message privé Réponse avec citation 10
Vieux 13/02/2012, 02h29   #16
Invité de passage
 
Homme
ingenieur
Inscription : janvier 2012
Messages : 17
Détails du profil
Informations personnelles :
Sexe : Homme

Informations professionnelles :
Activité : ingenieur
Secteur : High Tech - Multimédia et Internet

Informations forums :
Inscription : janvier 2012
Messages : 17
Points : 2
Points : 2
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 .

Citation:
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.
Vortexia est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 13/02/2012, 22h09   #17
Modérateur
 
Avatar de NoSmoking
 
Homme
Inscription : janvier 2011
Messages : 2 944
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : France, Isère (Rhône Alpes)

Informations forums :
Inscription : janvier 2011
Messages : 2 944
Points : 4 776
Points : 4 776
Citation:
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

Citation:
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 :
1
2
var oChild = document.getElementById('mess');
oChild.parentNode.removeChild( oChild);
...le même raisonnement peut être appliqué pour la méthode replaceChild
NoSmoking est déconnecté   Envoyer un message privé Réponse avec citation 10
Vieux 14/02/2012, 05h29   #18
Invité de passage
 
Homme
ingenieur
Inscription : janvier 2012
Messages : 17
Détails du profil
Informations personnelles :
Sexe : Homme

Informations professionnelles :
Activité : ingenieur
Secteur : High Tech - Multimédia et Internet

Informations forums :
Inscription : janvier 2012
Messages : 17
Points : 2
Points : 2
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.
Vortexia est déconnecté   Envoyer un message privé Réponse avec citation 00
Réponse Proposer ce sujet en actualité Cette discussion est résolue.
Outils de la discussion



Fuseau horaire GMT +2. Il est actuellement 18h00.


 
 
 
 
Partenaires

Hébergement Web