faire tomber des images différentes sur un site

Version imprimable

25/11/2006, 09h20
jrnb58

faire tomber des images différentes sur un site

bonjour à tous, voilà j'ai mis un script sur mon site afin de faire tomber de la neige sur la page d'accueil. Cela fonctionne impeccable. Mon problème est que j'aimerai faire tomber en même temps 2 ou 3 images différentes sur la même page. On m'a dit dans un forum qu'il suffisait de copier le script autanty de fois que l'on voulait d'images et de changer le nom de celles-ci, j'ai essayé mais cela ne fonctionne pas. existe y il un moyen d'avoir cet effet en javascript ( ou autre) sur un site avec 3 images?
merci pour votre aide
à bientôt
25/11/2006, 10h46
Sheriff

salut !
un bout de code serait le bienvenu...
@+

Citation:

Envoyé par Sheriff

salut !
un bout de code serait le bienvenu...
@+

bjr, oui ok j'ai oublié, voici le code que j'utilise pour une image et j'aimerai en mettre plusieurs qui tombent

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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
 
<script LANGUAGE="JavaScript1.2"> 
<!-- Begin
 
var no = 20; // nombre d'images
 
var speed = 10; 
 
var snowflake = "flocons.gif";
 
var ns4up = (document.layers) ? 1 : 0;
 
var ie4up = (document.all) ? 1 : 0;
 
var dx, xp, yp; 
 
var am, stx, sty;
 
var i, doc_width = 800, doc_height = 600;
 
if (ns4up) {
 
doc_width = self.innerWidth;
 
doc_height = self.innerHeight;
 
} else if (ie4up) {
 
doc_width = document.body.clientWidth;
 
doc_height = document.body.clientHeight;
 
}
 
dx = new Array();
 
xp = new Array();
 
yp = new Array();
 
am = new Array();
 
stx = new Array();
 
sty = new Array();
 
for (i = 0; i < no; ++ i) { 
 
dx[i] = 0; 
 
xp[i] = Math.random()*(doc_width-50); 
 
yp[i] = Math.random()*doc_height;
 
am[i] = Math.random()*20; 
 
stx[i] = 0.02 + Math.random()/10;
 
sty[i] = 0.7 + Math.random(); 
 
if (ns4up) {
 
if (i == 0) {
 
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
 
document.write("top=\"15\" visibility=\"show\"><img src=\"");
 
document.write(snowflake + "\" border=\"0\"></layer>");
 
} else {
 
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
 
document.write("top=\"15\" visibility=\"show\"><img src=\"");
 
document.write(snowflake + "\" border=\"0\"></layer>");
 
}
 
} else if (ie4up) {
 
if (i == 0) {
 
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
 
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
 
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
 
document.write(snowflake + "\" border=\"0\"></div>");
 
} else {
 
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
 
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
 
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
 
document.write(snowflake + "\" border=\"0\"></div>");
 
}
 
}
 
}
 
function snowNS() {
 
for (i = 0; i < no; ++ i) { 
 
yp[i] += sty[i];
 
if (yp[i] > doc_height+500) {
 
xp[i] = Math.random()*(doc_width-am[i]-30);
 
yp[i] = 0;
 
stx[i] = 0.02 + Math.random()/10;
 
sty[i] = 0.7 + Math.random();
 
doc_width = self.innerWidth;
 
doc_height = self.innerHeight;
 
}
 
dx[i] += stx[i];
 
document.layers["dot"+i].top = yp[i];
 
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
 
}
 
setTimeout("snowNS()", speed);
 
}
 
function snowIE() { 
 
for (i = 0; i < no; ++ i) { 
 
yp[i] += sty[i];
 
if (yp[i] > doc_height+500) {
 
xp[i] = Math.random()*(doc_width-am[i]-30);
 
yp[i] = 0;
 
stx[i] = 0.02 + Math.random()/10;
 
sty[i] = 0.7 + Math.random();
 
doc_width = document.body.clientWidth;
 
doc_height = document.body.clientHeight;
 
}
 
dx[i] += stx[i];
 
document.all["dot"+i].style.pixelTop = yp[i];
 
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
 
}
 
setTimeout("snowIE()", speed);
 
}
 
if (ns4up) {
 
snowNS();
 
} else if (ie4up) {
 
snowIE();
 
}
 
// End -->
 
</script>

ce code n'est pas de moi je l'ai récupérer sur un site qui en propose
merci
à bientôt

25/11/2006, 12h20
Sheriff

salut
il ne suffit pas de dupliquer les noms des images...
y a trop de variables à dupliquer et à changer dans ton code
mais bon, tu pourrais peut-être t'arranger à utiliser la même fréquence pour toutes tes images (les mettre dans le même layer - ou la même div)
pour ce faire tu n'aurais besoin de ne modifier que le document.write
si par contre tu veut appliquer un effet aléatoire sur chacune des images ça devient compliqué...
@+
25/11/2006, 12h24
jrnb58

Citation:

Envoyé par Sheriff

salut
il ne suffit pas de dupliquer les noms des images...
y a trop de variables à dupliquer et à changer dans ton code
mais bon, tu pourrais peut-être t'arranger à utiliser la même fréquence pour toutes tes images (les mettre dans le même layer - ou la même div)
pour ce faire tu n'aurais besoin de ne modifier que le document.write
si par contre tu veut appliquer un effet aléatoire sur chacune des images ça devient compliqué...
@+

ok merci mais comment je fais car là mois et le javascript ca fait deux des fois, peux tu me dire comment faire avec 2 images avec les bouts de code à modifier
merci pour ton aide:oops: :oops:

pour deux images :
tout d'abord il faut dupliquer le snowflake ; tu auras snowflake et snowflake1
ensuite, dans le document.write (ici je prend seulement l'exemple pour ie) tu fais

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
 
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
 
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
 
document.write(snowflake + "\" border=\"0\"></div>");

document.write("<div id=\"dot"+ i +no+"\" style=\"POSITION: ");
 
document.write("absolute; Z-INDEX: "+ i+no +"; VISIBILITY: ");
 
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
 
document.write(snowflake1 + "\" border=\"0\"></div>");

tu constateras que j'ai dupliqué l'image ; le (i+no) signifie que je crée un nombre "no" de nouvelle div pour la seconde image.

enfin, dans la fonction snowie() (ou snowns() selon ton browser) tu ajoutes les lignes
document.all["dot"+i+no].style.pixelTop = yp[i]; et document.all["dot"+i+no].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);

mon code final pour deux images est :

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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
 
<html>
<head>
 
</head>
<body>
arf
<script>
var no = 20; // nombre d'images
 
var speed = 10; 
 
var snowflake = "msn.gif";
var snowflake1 = "flocons.gif";
 
var ns4up = (document.layers) ? 1 : 0;
 
var ie4up = (document.all) ? 1 : 0;
 
var dx, xp, yp; 
 
var am, stx, sty;
 
var i, doc_width = 800, doc_height = 600;
 
if (ns4up) {
 
doc_width = self.innerWidth;
 
doc_height = self.innerHeight;
 
} else if (ie4up) {
 
doc_width = document.body.clientWidth;
 
doc_height = document.body.clientHeight;
 
}
 
dx = new Array();
 
xp = new Array();
 
yp = new Array();
 
am = new Array();
 
stx = new Array();
 
sty = new Array();
 
for (i = 0; i < no; ++ i) { 
 
dx[i] = 0; 
 
xp[i] = Math.random()*(doc_width-50); 
 
yp[i] = Math.random()*doc_height;
 
am[i] = Math.random()*20; 
 
stx[i] = 0.02 + Math.random()/10;
 
sty[i] = 0.7 + Math.random(); 
 
if (ns4up) {
 
if (i == 0) {
 
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
 
document.write("top=\"15\" visibility=\"show\"><img src=\"");
 
document.write(snowflake + "\" border=\"0\"></layer>");
 
} else {
 
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
 
document.write("top=\"15\" visibility=\"show\"><img src=\"");
 
document.write(snowflake + "\" border=\"0\"></layer>");
 
}
 
} else if (ie4up) {
 
if (i == 0) {
 
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
 
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
 
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
 
document.write(snowflake + "\" border=\"0\"></div>");
 
document.write("<div id=\"dot"+ i +no+"\" style=\"POSITION: ");
 
document.write("absolute; Z-INDEX: "+ i+no +"; VISIBILITY: ");
 
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
 
document.write(snowflake1 + "\" border=\"0\"></div>");
 
} else {
 
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
 
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
 
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
 
document.write(snowflake + "\" border=\"0\"></div>");
 
document.write("<div id=\"dot"+ i + no+"\" style=\"POSITION: ");
 
document.write("absolute; Z-INDEX: "+ i+no +"; VISIBILITY: ");
 
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
 
document.write(snowflake1 + "\" border=\"0\"></div>");
 
}
 
}
 
}
 
function snowNS() {
 
for (i = 0; i < no; ++ i) { 
 
yp[i] += sty[i];
 
if (yp[i] > doc_height+500) {
 
xp[i] = Math.random()*(doc_width-am[i]-30);
 
yp[i] = 0;
 
stx[i] = 0.02 + Math.random()/10;
 
sty[i] = 0.7 + Math.random();
 
doc_width = self.innerWidth;
 
doc_height = self.innerHeight;
 
}
 
dx[i] += stx[i];
 
document.layers["dot"+i].top = yp[i];
 
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
 
}
 
setTimeout("snowNS()", speed);
 
}
 
function snowIE() { 
 
for (i = 0; i < no; ++ i) { 
 
yp[i] += sty[i];
 
if (yp[i] > doc_height+500) {
 
xp[i] = Math.random()*(doc_width-am[i]-30);
 
yp[i] = 0;
 
stx[i] = 0.02 + Math.random()/10;
 
sty[i] = 0.7 + Math.random();
 
doc_width = document.body.clientWidth;
 
doc_height = document.body.clientHeight;
 
}
 
dx[i] += stx[i];
 
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i+no].style.pixelTop = yp[i];
 
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
document.all["dot"+i+no].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
 
}
 
setTimeout("snowIE()", speed);
 
}
 
if (ns4up) {
 
snowNS();
 
} else if (ie4up) {
 
snowIE();
 
}
</script>
 
 
</body>
</html>

et ça marche chez moi.
attention, je n'ai modifié que les fonctions afférentes à ie ; à toi de faire pareil pour ns

@+

25/11/2006, 14h02
jrnb58

salut sheriff
ok ca marche impeccable
les 2 images se chevauchent par contre comment faire pour quelles soient décalées si c'est possible
merci encore:king: :king:

:salut:

pourque les image soient décallées tu peux jouer aver les position (top et left)
essaie de retrouver ces lignes

Code:

1
2
3
4
5
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i+no].style.pixelTop = yp[i];
 
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
document.all["dot"+i+no].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);

et remplace-les par

Code:

1
2
3
4
5
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i+no].style.pixelTop = 100 + yp[i];
 
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
document.all["dot"+i+no].style.pixelLeft = 100 + xp[i] + am[i]*Math.sin(dx[i]);

où tu peux remplacer 100 par la valeur de ton choix.
@+

27/11/2006, 10h06
SpaceFrog

document.write ...:roll:
27/11/2006, 12h30
jrnb58

:king: :king:
merci sheriff
ok je vais essayé cela
merci encore pour les tuyaux et l'aide apportée
à bientôt peut être sur le forum
:lahola:
:resolu: