Détecter un déplacement d'image Js

Pour toutes les discussions javascript, jQuery et autres frameworks
Pompom
Messages : 9
Enregistré le : 24 mars 2021, 08:34

Détecter un déplacement d'image Js

Message par Pompom » 31 mars 2021, 08:28

Bonjours, c'est encore moi et mes images..
Dernièrement j'avais appellé de l'aide pour faire apparaitre des images au clic pour les déplacer etc..
On m'a généreusement aidez et j'ai de nouveau besoin de votre aide.. Merci d'avance.

Alors voici le problème:
Je déplace une image ( un petit rond rouge ) a travers une page HTML grace a des bouton (input type = "image " onclick....) cette image cedéplace dans d'autre image qui on été précédemment déplacer avec des <div> en Java, je voudrai que l'une de ce images que j'ai déplacer a l'aide des <div> détecte que j'ai placer sur eux un petit point rouge ( une image que j'ai superposer ) et que cette dernière m'indique une information, sa peu être un changement de couleur, un changement d'image ou même avec des numéro comme 0 qui passe a 1 mais pas dans l'image de la <div> qui as reçu le point rouge mais dans une autre similaire juste a coté.

Je vous la refait plus simple avec l'image ci dessous:

J'ai un bouton qui qui déplace le petit point rouge du double carré dans l'un des carré 1 ou 2 au choix de l'utilisateur, qui informera la case d'a coté qui cette derniere indiquera que le point rouge ce situe dans la case de gauche c'est a dire que si j’envoie mon point rouge dans la case 1, la case "input" changera, soit par couleur, soit d'image soit avec un chiffre ou autre du moment qu'on nous avons cette indication.

Merci de votre aide précieuse (Je suis nouveau dans le langage Js du coup j'y connais vraiment pas grand chose, idem pour le css..)
Fichiers joints
GrafcetImg..png
GrafcetImg..png (136.66 Kio) Vu 11065 fois

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Détecter un déplacement d'image Js

Message par webmaster » 31 mars 2021, 11:11

Bonjour,

Le projet est vraiment ambitieux pour un débutant JS.
Je partirai plutot sur un module externe (meme si cela ne sera pas facile car je n'ai rien trouvé de gratuit en première approche)
Ou alors il faut se former progressivement au JS, en lisant pas mal de tuto:
https://www.toutjavascript.com/savoir/i ... -dhtml.php
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Pompom
Messages : 9
Enregistré le : 24 mars 2021, 08:34

Re: Détecter un déplacement d'image Js

Message par Pompom » 31 mars 2021, 11:21

Merci de ta réponse, le projet en lui même j'ai pas vraiment l'impression qu'il soit trop complexe pour le réussir, mais vue que je m'y connais pas trop je suis souvent perdu il faut l'avoué mdr, du coup je cherche beaucoup d'aide et de tuto sur internet, et je cherche aussi des alternative par exemple j'ai vue que l'on pouvais faire sa avec un survol de souris, donc je me suis dit pourquoi pas mettre a l'image la fonction du curseur de la sourie, et a l'image que je survol le lui mettre un id qui modifiera une image a côté qui elle recevra l'information grâce a l'id ou quelque chose de ce genre, Est ce que ce sera possible de faire ceci?
Merci de ton aide. :D

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Détecter un déplacement d'image Js

Message par webmaster » 31 mars 2021, 11:32

Oui, c'est possible aussi d'ajouter des informations à un objet au passage de la souris, avec les propriétés dataset
https://www.toutjavascript.com/referenc ... ataset.php

Il y a une autre difficulté dans ce projet: la sauvegarde de la saisie pour reprendre un graph plus tard, le partager, le sauvegarder, ...
Pour cela, il faut un langage serveur (nodejs, php, ...) pour stocker durablement sur un serveur les données du graphe.

Le JS ici ne fait que l'affichage du rendu et l'interface utilisateur.

C'est possible et intererssant à faire, mais même pour un developpeur à l'aise, cela représente plusieurs jours de travail.
C'est pour cela que des modules tout fait existent (le plus souvent payant, d'autant que les grafcet servent surtout dans l'industrie)
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Pompom
Messages : 9
Enregistré le : 24 mars 2021, 08:34

Re: Détecter un déplacement d'image Js

Message par Pompom » 31 mars 2021, 11:51

Et bien je suis simple stagiaire dans une entreprise, à la base je connaissait pas les Grafcet et puis j'ai vite compris âpres quelques explications et quelques recherches.

Pour ma par sa fait depuis lundi de la semaine dernière que j'ai commencer et j'ai déjà réalisé toute la bibliothèque,
le montage, le déplacement des étape active etc.. Il ne me reste plus trop grand chose a réalisé pour terminer je suppose? comme la que sa donne les information des input/output.et puis âpres je suis aussi ici pour apprendre alors bon.. mais enfin bref, php j'ai déjà entendu parler mais nodejs? js pour javascript? :?:
Je vais aller me renseigner merci beaucoup Webmaster! :D ;)

Pompom
Messages : 9
Enregistré le : 24 mars 2021, 08:34

Re: Détecter un déplacement d'image Js

Message par Pompom » 01 avr. 2021, 14:31

Bonjour, j'ai une question, et vue que c'est dans ce sujet la je préfère redemander ici au lieux de refaire un nouveau sujet;

L'image contenant mon rond rouge, peut elle avoir la fonction de onmouseout ou onmouseover, mais pour elle? C'est a dire qu'elle pend la fonction du survol, comme sa elle peu faire la même chose que la souris mais avec des bouton qui la déplace. Ceci est possible? ( je n'ai vue personne en parler sur les forum, les tuto, etc.. :| )

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Détecter un déplacement d'image Js

Message par webmaster » 02 avr. 2021, 09:32

Re,

Pour démarrer un nouveau langage, je choisirai nodejs (même si je pratique PHP depuis 20 ans) qui est bien plus moderne.

Je n'ai pas compris la derniere question et meme en relisant plusieurs fois, je ne vois pas bien quoi répondre...
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Pompom
Messages : 9
Enregistré le : 24 mars 2021, 08:34

Re: Détecter un déplacement d'image Js

Message par Pompom » 02 avr. 2021, 09:50

Et bien, je me demandais si il était possible de créé un survol d'image avec une image que l'on déplace avec des <div>
Je déplace un petit rond rouge a travers ma page Html, qui contient des images elle même, et quand mon point rouge passe sur l'une de ses images, elle change comme si c’était un survol de souris. C'est possible de faire ceci? tel est ma question reformulé :lol:
Merci
Cordialement

bekean23
Messages : 5
Enregistré le : 25 juil. 2023, 03:54

Re: Détecter un déplacement d'image Js

Message par bekean23 » 25 juil. 2023, 04:00

Pompom a écrit :
02 avr. 2021, 09:50
Et bien, je me demandais si il était possible de créé un survol d'image avec une image que l'on déplace avec des <div>
Je déplace un petit rond rouge a travers ma page Html, qui contient des images elle même, et quand mon point rouge passe sur l'une de ses images, elle change comme si c’était un survol de souris. C'est possible de faire ceci? tel est ma question reformulé :lol: wordle
Merci
Cordialement
Vous souhaitez que lorsque vous déplacez le petit rond rouge (à l'aide de <div>), si le rond survole l'une des images sur la page, cette image change comme si elle était survolée par la souris.
C'est tout à fait possible de faire cela avec JavaScript et CSS. Vous pouvez utiliser des événements pour détecter lorsque le rond rouge survole une image et modifier son apparence en conséquence.

jeanparisiner
Messages : 1
Enregistré le : 12 août 2023, 21:52
Localisation : Lyon

Re: Détecter un déplacement d'image Js

Message par jeanparisiner » 12 août 2023, 21:59

bekean23 a écrit :
25 juil. 2023, 04:00
Pompom a écrit :
02 avr. 2021, 09:50
Et bien, je me demandais si il était possible de créé un survol d'image avec une image que l'on déplace avec des <div>
Je déplace un petit rond rouge a travers ma page dream about snakes Html, qui contient des images elle même, et quand mon point rouge passe sur l'une de ses images, elle change comme si c’était un survol de souris. C'est possible de faire ceci? tel est ma question reformulé :lol: master number 11
Merci
Cordialement
Vous souhaitez que lorsque vous déplacez le petit rond rouge (à l'aide de <div>), si le rond survole l'une des images sur la page, cette image change comme si elle était survolée par la souris.
C'est tout à fait possible de faire cela avec JavaScript et CSS. Vous pouvez utiliser des événements pour détecter lorsque le rond rouge survole une image et modifier son apparence en conséquence.
Hmm, je pensais que CSS n'était utilisé que pour le design ?!

Répondre