Discussion :

[Ptit_Mouss]

Bonjour,

J'aimerais savoir s'il est possible, à partir d'une image de la déplacer sur la page web de façon dynamique : par des translations toute simple, rotation etc. Je m'explique en fait je gère un site de vente en ligne qui ajoute de nouveaux produits (avec l'image des nouveaux produits) sur le serveur assez souvent et j'aimerais générer des animations avec les images des derniers produits enregistrés pour faire une petite pub par exemple.

Je voulais donc savoir s'il existe un moyen quelconque (des fonctions ou des propriétés ?) en javascript (ou un autre langage pour le WEB ?) se rapportant à la position d'une image sa taille etc. (pour des effets de zoom éventuellement) ce qui permettrait de faire "bouger" l'image dynamiquement.

Merci.

[stanford]

Pourquoi ne pas utiliser flash??

[SpaceFrog]

la translation ne pose pas de probmème en javascript ...
la rotation par contre c'est une autre paire de manches ...

[Ptit_Mouss]

Bonjour,

Stanford : tout simplement parce que j'utilise des fichiers images ajoutés souvent sur le serveur (et pas par moi) et si j'utilisais flash je devrais créer une animation pour chaque image différente ce qui devient très vite long et inutile car beaucoup de nouveaux produits sont ajoutés chaque mois.

Là j'ai réussi à faire ce que je voulais j'ai crée une fonction de zoom qui grossit les images et des fonctions qui permettent la translation, ça fonctionne impecc' !

Pour ceux qui sont intéressés j'ai utilisé le javascript avec les options de style des images comme ceci :

document.getElementById("image").style.left = valeur;

Avec un setTimeout() bien placé le script régénère la position de l'image toutes les X ms et donne un effet de déplacement. La fonction de zoom a été créée grâce aux propriétés width et height, tout ça est compatible IE et firefox. Je peux poster mon source si ça intéresse du monde, en tout cas c'est très pratique tout est automatique, dès qu'on rajoute un produit hop ca génère une nouvelle pub sur la page !

[stanford]

Bien joué,

Pour ton script oui si tu peux mettre la fonction, c'est toujours interressant.

Sinon pour le flash tu aurais très bien pu très bien faire un template qui reçoit en paramètre une image et donc pas besoin de faire une animation pour chaque image (heureusement)

[Ptit_Mouss]

Je ne savais pas ça ... un template ? qu'est-ce que c'est ? est-ce que c'est une animation "générique" qui te permet de créer une animation avec une image que tu lui passes en paramètre ? par exemple si tu veux qu'elle fasse une rotation puis une translation tu crée ton animation comme tu veux et après il suffit de lui passer en paramètre le nom de l'image et hop il remplace l'image et lui applique les effets désirés ? ça pourrait effectivement être sympa je vais me renseigner la-dessus ! merci !

Voici mes fonctions, pour info cette partie prend une image la met en dehors de l'écran (à gauche) et la fait arriver en la translatant d'en "dehors" de l'écran vers la droite, puis la fais zoomer et reviens à son zoom initial de 100px :

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
function extrait_valeur(attribut){
              var longueur = attribut.length;
              longueur-=2;
              return attribut.substring(0,longueur);
            }
 
            function changer_valeur(attribut, nouvelle_valeur, id_image){
              id = id_image;
              switch(attribut){
                case "top":document.getElementById(id).style.top = nouvelle_valeur;break;
                case "bottom":document.getElementById(id).style.bottom = nouvelle_valeur;break;
                case "left":document.getElementById(id).style.left = nouvelle_valeur;break;
                case "right":document.getElementById(id).style.right = nouvelle_valeur;break;
                case "width":document.getElementById(id).width = nouvelle_valeur;break;
                case "height":document.getElementById(id).height = nouvelle_valeur;break;
              }
            }
 
            function valeur(type_style, id_image){
              var element_a_analyser;
              switch(type_style){
                case "top":element_a_analyser = document.getElementById(id_image).style.top;break;
                case "bottom":element_a_analyser = document.getElementById(id_image).style.bottom;break;
                case "left":element_a_analyser = document.getElementById(id_image).style.left;break;
                case "right":element_a_analyser = document.getElementById(id_image).style.right;break;
                case "width":return document.getElementById(id_image).width;break;
                case "height":return document.getElementById(id_image).height;break;
                default:break;
              }
              return extrait_valeur(element_a_analyser);
            }
 
            //Permet de déplacer l'image vers le bas de "distance" pixels avec une certaine vitesse
            function dpt_bas(distance, vitesse, id_image){
              if(distance >= 0){
                new_valeur = parseInt(valeur("top", id_image)) + parseInt(vitesse);
                changer_valeur("top", new_valeur, id_image);
                dist = parseInt(distance) - parseInt(vitesse);
                vit = vitesse;
                id = id_image;
                setTimeout("dpt_bas(dist,vit,id)", 3);
              }
            }
 
            //Permet de déplacer l'image vers le haut de "distance" pixels avec une certaine vitesse
            function dpt_haut(distance, vitesse, id_image){
              if(distance >= 0){
                new_valeur = parseInt(valeur("top", id_image)) - parseInt(vitesse);
                changer_valeur("top", new_valeur, id_image);
                dist = parseInt(distance) - parseInt(vitesse);
                vit = vitesse;
                id = id_image;
                setTimeout("dpt_haut(dist,vit,id)", 3);
              }
            }
 
            //Permet de déplacer l'image sur la droite de "distance" pixels avec une certaine vitesse
            function dpt_droite(distance, vitesse, id_image){
              if(distance >= 0){
                new_valeur = parseInt(valeur("left", id_image)) + parseInt(vitesse);
                changer_valeur("left", new_valeur, id_image);
                dist = parseInt(distance) - parseInt(vitesse);
                vit = vitesse;
                id = id_image;
                setTimeout("dpt_droite(dist,vit,id)", 3);
              }
            }
 
            //Permet de déplacer l'image sur la gauche de "distance" pixels avec une certaine vitesse
            function dpt_gauche(distance, vitesse, id_image){
              if(distance >= 0){
                new_valeur = parseInt(valeur("left", id_image)) - parseInt(vitesse);
                changer_valeur("left", new_valeur, id_image);
                dist = parseInt(distance) - parseInt(vitesse);
                vit = vitesse;
                id = id_image;
                setTimeout("dpt_gauche(dist,vit, id)", 3);
              }
            }
 
            //Permet de changer la largeur de l'image
            function width(valeur_zoom, vitesse, id_image){
              new_valeur_zoom = valeur_zoom;
              new_vitesse = vitesse;
              if (valeur_zoom >= valeur("width", id_image)){
                changer_valeur("width", parseInt(valeur("width", id_image)) + parseInt(vitesse), id_image);
                if (valeur("width", id_image) >= valeur_zoom) {
                  changer_valeur("width", valeur_zoom, id_image);
                  return;
                }
              }else{
                changer_valeur("width", parseInt(valeur("width", id_image)) - parseInt(vitesse), id_image);
                if (valeur("width", id_image) <= valeur_zoom) {
                  changer_valeur("width", valeur_zoom, id_image);
                  return;
                }
              }
              id = id_image;
              setTimeout("width(new_valeur_zoom, new_vitesse, id)", 0);
            }
 
            //Permet de changer la hauteur de l'image
            function height(valeur_zoom, vitesse, id_image){
              new_valeur_zoom = valeur_zoom;
              new_vitesse = vitesse;
              if (valeur_zoom >= valeur("height", id_image)){
                changer_valeur("height", parseInt(valeur("height", id_image)) + parseInt(vitesse), id_image);
                if (valeur("height", id_image) >= valeur_zoom) {
                  changer_valeur("height", valeur_zoom, id_image);
                  return;
                }
              }else{
                changer_valeur("height", parseInt(valeur("height", id_image)) - parseInt(vitesse), id_image);
                if (valeur("height", id_image) <= valeur_zoom) {
                  changer_valeur("height", valeur_zoom, id_image);
                  return;
                }
              }
              id = id_image;
              setTimeout("height(new_valeur_zoom, new_vitesse, id)", 0);
            }
 
            //Permet de "zoomer" sur une image
            function zoom(valeur_zoom, vitesse, id_image){
              width(valeur_zoom, vitesse, id_image);
              height(valeur_zoom, vitesse, id_image);
            }
 
            //Lancement de l'animation à la fin du chargement de la page
            function animation(){
              changer_valeur("left", -150, "image");
              setTimeout("animation_go()", 1000);
            }
 
            function animation_go(){
              img = "image";
 
              //zoom puis retour à la normale
              //zoom(200,30,img);
              //setTimeout("zoom(100,30,img)", 1000);
 
              //Apparition sur le coté gauche + zoom
              dpt_droite(150,5,img);
              setTimeout("zoom(150,15,img)", 2000);
              setTimeout("zoom(100,15,img)", 3000);
 
              //Grande descente
              //dpt_bas(800,10,img);
 
            }
            animation();