Déplacement d'une boite DIV au clic

Bonjour à tous,

Merci de m'acceuillir sur votre site. Désolé si ma question vous parait simple et/ou si elle à déjà été traité mais malgré mes recherches je n'ai rien trouvé.

Mon souhait est simple :

Je voudrais qu'un lien contenu dans une boite DIV fasse se déplacer ce même DIV d'un point A vers un point B (Coordonnées pré-définies)

Mon niveau en CSS est raisonnable, par contre en JAVASCRIPT je suis une vraie brèle ...

Par avance merci pour votre aide

Steve

Bonjour,

Pour obtenir un tel résultat en html/css/js il faut être précis dans ces trois languages, c'est donc asser complexe. Il est peut-être préferable de voir si Flash ne convient pas mieux pour ton animation. Flash offre en effet toute une palette d'outil pour te faciliter la tâche. En javascript par contre il faut tout coder à la main.

Avant de coder il faut voir étape par étape ce qu'il vat se passer :

1. la boite et dans la position initiale, c'est mieux qu'elle soit en position absolue, tu vas en effet jouer sur les propriétés top et left.

2. la boite démare sur un évenement onclick, il faut donc que tu es un bouton qui lance un fonction agissant sur ta boite. Tu peux déja commencer par la faire ce déplacer de sa position initiale à sa position finale sans effet.

3. Ensuite il faut que tu fasses un mouvement. Pour cela il faut que toute les x millisecondes tu ajoutes x pixels à ta position left et top. Tu vas donc utiliser setTimeout ou setInterval.
Dans le cas ou il y deux axes c'est nettement plus compliqué car tu dois faire un calcul pour déterminer le bon rapport entre vitesse de déplacement horizontal et vertical

4. Au moment ou la boite arrive à une position top ou left donnée la boucle setTimeout s'arrête.

Comme tu le vois le plus difficile n'est pas forcement de connaitre javascript mais de bien visualiser le probléme (un petit schéma est toujours bien utile).

Si tu veux tu peux utiliser des librairies javascript qui te compliqueront ou te simplifieront la vie selon ton cas, tu as mootools ou jQuery entre autre. L'avantage par exemple pour mootools est que tu peux faire des effets d'accélération ou de ralentissement ce qui est dur à calculer si tu fais toi même ta fonction.
Modifié par matmat (20 Aug 2007 - 02:00)

Ou a moins que ce que tu entendes par "déplacer" soit en fait un déplacement simple, un genre de téléportation d'un point A vers un point B.

En ce cas, il suffit de récupérer ton élément (en position absolute) avec un document.getElementById(), et appliquer un element.style.top = XX et element.style.left = YY pour le placer aux nouvelles coords