5062 sujets

Sémantique web et HTML

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).
Hummmm Je mêles mon grain de sel car vous parlez d'image alors j' espères au minimum que vous avez pensé responsive ... allez je vous donnes un coup de main...
Testez ...
avec javascript
http://www.fox-infographie.com/responsive1.htm
sans javascript
http://www.fox-infographie.com/responsive2.htm
Les deux ont étés postés ici (pas par moi Smiley confused )
Voici le code du html les trois petits JS téléchargez les sur le code.

<!DOCTYPE html><html lang="fr">   
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if IE]>
  <script src="img_responsive/html5.js"></script>
<![endif]-->
 <style>
 img.respon {width: 100%; height: auto;}
 </style>
</head>
<body>
<img class="respon" src="img_responsive/responsive1.jpg" USEMAP="#banner" BORDER=0>
<map name="banner">                                                                                          
  <area shape="rect" coords="527,172,571,226" href=""  alt="Zone 01" title="Zone 01" OnMouseOver="window.status='Zone 01'; return true" OnMouseOut="window.status=''; return true" target="_blank">
  <area shape="rect" coords="590,610,803,877" href=""  alt="Zone 02" title="Zone 02" OnMouseOver="window.status='Zone 02'; return true" OnMouseOut="window.status=''; return true" target="_blank">
  <area shape="rect" coords="339,250,608,459" href=""  alt="Zone 03" title="Zone 03" OnMouseOver="window.status='Zone 03'; return true" OnMouseOut="window.status=''; return true" target="_blank">
  <area shape="rect" coords="1005,645,1248,781" href=""  alt="Zone 04" title="Zone 04" OnMouseOver="window.status='Zone 04'; return true" OnMouseOut="window.status=''; return true" target="_blank">
  <area shape="rect" coords="1260,652,1398,790" href=""  alt="Zone 05" title="Zone 05" OnMouseOver="window.status='Zone 05'; return true" OnMouseOut="window.status=''; return true" target="_blank">
  <area shape="rect" coords="125,1130,229,1258" href=""  alt="Zone 06" title="Zone 06" OnMouseOver="window.status='Zone 06'; return true" OnMouseOut="window.status=''; return true" target="_blank">
  <area shape="rect" coords="1264,138,1342,441" href=""  alt="Zone 07" title="Zone 07" OnMouseOver="window.status='Zone 07'; return true" OnMouseOut="window.status=''; return true" target="_blank">
  <area shape="rect" coords="1408,643,1467,776" href=""  alt="Zone 08" title="Zone 08" OnMouseOver="window.status='Zone 08'; return true" OnMouseOut="window.status=''; return true" target="_blank">
  <area shape="rect" coords="1030,504,1366,611" href=""  alt="Zone 09" title="Zone 09" OnMouseOver="window.status='Zone 09'; return true" OnMouseOut="window.status=''; return true" target="_blank">
  <area shape="rect" coords="1805,1002,2044,1218" href=""  alt="Zone 10" title="Zone 10" OnMouseOver="window.status='Zone 10'; return true" OnMouseOut="window.status=''; return true" target="_blank">
</map>
<script src="img_responsive/jquery.min.js"></script>
<script src="img_responsive/jquery.rwdImagemaps.min.js"></script>
<script>
$(document).ready(function(e) {
	$('img[usemap]').rwdImageMaps();
});
</script>
</body>
</html>


et le deuxiéme

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<meta property="og:title" content="Visitez notre site" />
<title>Fox Infographie creation site web, photographie et infographie design (site officiel)</title>
<meta name="robots" content="all" />
<meta name="rating" content="general" />
<style>
html {
font-size:30px;
min-height:100%;
background:linear-gradient(0deg, transparent,gray);}
p , h1{text-align:center;
position:relative;text-shadow:1px 1px #999
}
.image_map  {
width:640px;height:480px;
margin:1em auto;
border : solid gray;
box-shadow:0 0 0.5em  white,0 0 0  2000px rgba(0,0,0,0.5);
transition:0.5s;
border-radius:1em;
overflow:hidden;
position:relative;
}

@media all and (max-width:700px) {
div.image_map {
width:480px;height:360px;overflow:hidden;
position:relative;border:solid red;
box-shadow:0 0 0.5em  white,0 0 0  2000px rgba(100,50,0,0.5);
transition:0.5s;}
html {transition:0.5s;
font-size:20px;}
.image_map img, map {
position:absolute;
transform:scale(0.75);transform-origin:0 0}
 }
 @media all and (max-width:500px) { 
div.image_map {
border:solid blue;
width:320px;height:240px;overflow:hidden;
position:relative;border:solid;
box-shadow:0 0 0.5em  white,0 0 0  2000px rgba(0,100,200,0.5);
transition:0.5s;}
html {transition:0.5s;
font-size:15px;}
.image_map img, map {
position:absolute;
transform:scale(0.5);transform-origin:0 0}
 }
 img {vertical-align:top;}
 h1,p {margin:0;}
 map, area {position:absolute;display:block;text-align:center}
 map {top:0;left:0;font-size:2em;}
 area:before {content:attr(title);color:white;text-shadow:0 0 1px #333;}
 area[title="Lien 1"] {top:0;left:0;width:298px;height:248px;background:rgba(0,0,0,0.5);line-height:248px;}
 area[title="lien 2"] {top:0;left:298px;width:342px;height:248px;background:rgba(0,0,0,0.5);line-height:248px;}
 area[title="lien 3"] {top:248px;left:0;width:338px;height:232px;background:rgba(0,0,0,0.5);line-height:232px;}
 area[title="lien 4"] {top:248px;left:338px;width:302px;height:232px;background:rgba(0,0,0,0.5);line-height:232px;}
 area:hover {background:none;}
 </style>
</head><body>
<h1>Copy right je crois Alsacreation</h1>
<div  class="image_map">
<img id="ImageMaps" src="img_responsive/responsive2.jpg" usemap="#ImageMaps" border="0" width="640" height="480" alt="" />
<map id="ImageMaps" name="ImageMaps">
<area shape="rect" coords="0,0,298,248" href="#" alt="Lien 1" title="Lien 1"    />
<area shape="rect" coords="297,1,635,249" href="#" alt="lien 2" title="lien 2"    />
<area shape="rect" coords="0,247,338,475" href="#" alt="lien 3" title="lien 3"    />
<area shape="rect" coords="336,245,635,475" href="#" alt="lien 4" title="lien 4"    />
</map>
</div>
</body></html>