5568 sujets

Sémantique web et HTML

Récupérer les coord d'une img cliquable dans un formulaire ?

Bonjour à tous,
je suis en train de me creuser la tête sur un projet mais il me manque une étape. En gros, c'est pour un formulaire de déclaration d'accident du travail, où l'on doit pouvoir déclarer la partie du corps où la personne s'est blessée.

Au début, je pensais simplement faire des cases à cocher avec des propositions, mais comme il y a trop de possibilités, ça nous a vite semblé ingérable.

Je me suis dit que la solution serait de mettre une image cliquable d'un corps humain où chaque pixel serait cliquable afin de sélectionner précisément l'endroit du bobo.

Le truc, c'est que j'ai besoin ensuite d'envoyer cette info dans un formulaire. Existe t'il un moyen d'envoyer ces coord dans un formulaire ? Difficulté supplémentaire : je pense que l'on doit pouvoir sélectionner plusieurs endroits dans l'image, pour le cas où une personne se blesserait à plusieurs endroits... Ca vous semble gérable ?

Merci d'avance !
Salut

Pour ce qui est de "séléction" d'image etc... c'est un travail très complex et long.

Et il va falloir, je pense, se tourner vers les formats SVG (pour les images) pour faire du vectorielle, et permettre de sélectionne directement une partie de l'image.
Modifié par JENCAL (08 Nov 2019 - 10:15)
Oui et je viens de réaliser que si je passe par une image mappée de 800 x 800 px où chaque pixel serait cliquable, cela me ferait 640 000 liens à gérer... Smiley biggol Je pense qu'un bon vieux champ libre fera l'affaire Smiley cligne
Bonjour bast,

Une idée comme ca..
Pourquoi pas faire une image dans un canvas où la personne entourait la zone
et tu récupèrerais l'image.
Modérateur
Bonjour,

Première solution - Utilisation d'un input de type image :

https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/image

Quand on clic sur l'image, le navigateur transmet les coordonnées X et Y qui ont été cliqué par l'utilisateur. Voir plus bas dans le lien mentionné. Il y a un exemple.

Après, s'il y a plusieurs endroits sur le corps, l'utilisateur peut cliquer une fois sur l'image, décrire ses symptômes, puis cliquer à nouveau sur l'image, décrire les symptômes, et ainsi de suite.

Deuxième solution - Javascript
Avec Javascript, il est possible de détecter où l'image a été cliquée.

Attention cependant. Est-ce que ce formulaire risque d'être utilisé sur mobile? Cela peut devenir difficile de cliquer au bon endroit sur un écran d'appareil mobile avec ses gros doigts. Il faut en tenir compte dans le choix d'une solution.
Modérateur
Je rejoins aussi les autres propositions concernant l'utilisation de SVG. Ça permettrait de mettre en place un outil pour zoomer/dezoomer sans perte de qualité.
Modérateur
Bonjour bast,

À vue de nez sans trop d'analyse, j'ai quelques remarques.

Même avec une image, comment vas-tu permettre à un utilisateur de cliquer soit sur le dessus de la main vs la paume de la main? Idem pour la tête. Ça peut être devant, derrière, dessus, dedans. Bref, à moins de présenter un modèle 3D ou plusieurs images sous différents angles, ça risque de bloquer...

D'après toi, il est question de combien de possibilités d'endroits sur le corps?

Je pose la question, car j'ai l'impression que ça pourrait s'avérer pertinent d'avoir des zones bien définies que l'utilisateur pourrait sélectionner, ne serait-ce que pour stocker cette information dans la base de données et pouvoir sortir des statistiques précises : X blessures sur le genou de la jambe gauche, X blessures sur l'oreille droite, etc... plutôt que des coordonnées X et Y.

Au niveau du formulaire, ça pourrait se faire sous forme de Wizard étape par étape où l'utilisateur choisit une partie générale du corps (haut du corps, tête, bas du corps, etc...), puis ensuite un autre sous-ensemble du corps (jambe gauche, jambe droite), puis finalement la partie plus précise (le genou).
Sujet clos
Aller à