Déplacer un objet

Version imprimable

1 pièce(s) jointe(s)

Déplacer un objet

bonsoir

j'ai une image d'éprouvette que je veux la déplacer et verser son contenu dans un Un électrolyseur vide, lorsque je clic dessus puis elle retourne à sa place initiale

c'est une simulation d'une expérience chimique qui comporte plusieurs animations , mais je débute par l'éprouvette .
Pièce jointe 181385

je ne sais pas est ce que je dois utiliser javascript ou jQuery ou css ou le tous

j'ai commencé par une page html ou j'ai positionné mes photos et une page css
Code:

1 2 3 4 5 <body> <img src="images/sc2.png" alt="sc2" name="id1" id="id1" /> <img src="images/sc1.png" alt="sc1" name="id2" width="536" height="555" id="id2" /> <img src="images/sc2.png" alt="sc3" name="id3" width="114" height="216" id="id3" /> </body>
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 @charset "utf-8"; /* CSS Document */ div{ position:absolute; } #id1{ width:114px; height:216px; top:106px; left:259px; } #id2{ width:536px; height:555px; top:106px; left:259px; } #id3{ width:114px; height:216px; top:106px; left:259px; }

24/06/2015, 00h11
01001111

Bonsoir.

Si tu veux animer le liquide en deux dimensions, il faudra passer par un canvas 2D plutôt qu'une image, mais ça risque d'être un peu difficile si tu es débutant.

Pour le déplacement, je suis partisan du onclick ou onmousedown pour déclencher la fonction, qui lui même déclencherait un onmousemove pour le déplacement (qui se ferait par jquery ou js), et quand terminé par onclick ou onmouseup, selon le premier ou deuxième cas, on retire l'écouteur de mousemove. Sinon tu as maintenant mais moins compatible de manière descendante, le drag and drop html5:
voir sur le MDN
24/06/2015, 01h00
iMech

merci pour votre réponse vous m'avez donné une piste

juste une remarque je veux juste faire un simple clic sur l'image de l'éprouvette et elle se déplace automatiquement ver l'électrolyseur elle fait une demi rotation ( comme ci elle verse sont contenu) enfin elle retourne à sa place initiale.
24/06/2015, 09h58
melka one

jour

une autre piste son les annimation css
24/06/2015, 10h42
Theta

Il est également possible d'utiliser des animations svg (d'autant plus que l'illustration de l'éprouvette se porte bien au vectoriel).
24/06/2015, 12h31
01001111

Je suis fan des animations svg, malheureusement SMIL n'est toujours pas géré par IE 11, ni même Spartan( IE12).
24/06/2015, 12h52
iMech

par la fin l'animation sera utilisé sur des tablettes android

est ce que l'SVG est pris en charge ?

si c'est possible un exemple de code JS ou jquery ;

où il y a une trajectoire de mouvement après un clic souris
24/06/2015, 13h14
SylvainPV

Le plus simple serait d'utiliser Flash et d'exporter en HTML5. Ou alors d'utiliser un outil en ligne comme https://www.animatron.com/