bouger une image

**SENCABOY** · 16/01/2006, 17h08

--------------------------------------------------------------------------------

j'aimerais savoir comment on peut faire pour bouger une image de gauche a droite de l'ecran
merci a vous

**javatwister** · 16/01/2006, 17h13

on lui donne une position absolute et on agit à intervalle régulier sur sa propriété left;

**siddh** · 16/01/2006, 17h15

tiens jt, ton post dans les sources :

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
 
<html>
<head>
<title>...</title>
 
<style type="text/css">
body {margin:0px}
img {display:none;position:absolute}
// propriétés de la boîte à images;"position" et "overflow" sont nécessaires;
#c {display:none;margin-top:100px;background-color:#ffcc00;position:relative;overflow:hidden;}
</style>
 
</head>
 
<body>
<h1 id="mess" style="text-align:center">
Veuillez patienter...
</h1>
<div id="nul"></div>
 
<div style="margin-top:50px;margin-left:50px">
<strong>
En passant sur la boîte à 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;<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 reclique dans la zone, on relance le défilement;
</strong>
</div>
 
<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('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"));
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>

**SENCABOY** · 16/01/2006, 17h16

merci je vais essayer de suite

**SpaceFrog** · 16/01/2006, 17h16

tu vas voir siddh JT vas te dire que ce n'est pas de lui

**siddh** · 16/01/2006, 17h30

ben en tout cas, c'est lui qui l'avais mis dans le post pour les sources et je lui ai attribué dans la page

**SENCABOY** · 16/01/2006, 17h37

c cool mais j'arrive mettre une image mais en faites je veux en mettre 4 l'une de l'autre , et la je vois pasqu'elle parametre modifier

**takamo** · 21/06/2006, 18h12

Bonjour,
je viens de tester ce code et j'ai voulu le modifier mais j'ai tout fait planté lol

j'ai essayé de modif pour en faire ceux ci :

-avoir 4 ou 5 images qui défilent de bas en haut puis disparaissent une fois arrivé en haut pour réapparaitre en bas et en faire une boucle et ceux dans un cadre dont je peux def la taille!

-lorsque je clique sur l'une de celles-ci elles ouvrent un site (genre lien href)

si quelqu'un peu me dire si c'est possible ?
je ré-essais ce soir et si j'y arrive pas je me permettrais de poster mon speudo code

merci par avance de votre aide

bouger une image

JavaScript

Discussions similaires

Partager

Partager